ajax怎么实现向数据库添加数据?

ajax怎么实现向数据库添加数据?,第1张

ajax主要是用来实现异步 *** 作的,ajax会向一个可以 *** 作数据库的脚本语言(例如php)文件发出请求,同时传递参数和数据,在php文件中,通过插入数据库的代码,实现添加数据,然后返回成功的标志,ajax就根据这个标志来判断是否成功。

(1).aspx 普通web窗体页。删除aspx页面中 html代码,只保留第一行。在后置代码页 .aspx.cs 中写对应的方法代码。前台调用:// 异步调用页面url,参数组,返回执行事件 $.post("AjaxPage.aspx" , { type:'getData01' },function(re){

$('#re_method01').html(re)

})复制代码(2)单独.aspx 页(新建的时候不勾选 “将代码放在单独的文件中”) + 任意.cs文件(需要继承System.Web.UI.Page) .aspx文件中代码 <%@ Page Inherits="命名空间.类" %>(3).ashx页面这里主要知识点就是继承了IHttpHandler接口。来实现Http web相关的事件处理。

实现方法:新建后注销掉context.Response.Write("Hello World")改为你的事件处理代码即可。1,2,3的前台ajax调用方法都一样。如果需要区分不同的ajax调用。我们可以传递一个不同值的 type 参数。后台再通过switch执行各自的处理程序。(4)利用System.Web.Services.WebMethodAttribute。在(1)的基础上引用命名空间using System.Web.Services然后在需要异步执行的方法上添加[WebMethod]属性。 [WebMethod]

publicstaticstring HandleEvent01(string para,string para2){//code...return"YOUR DATA"

}复制代码前台调用代码: $.ajax({

type: "POST",

contentType: "application/json",

url: "AjaxWebService.aspx/HandleEvent01", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 data: "{'para':'bill','para2':'28'}", //这里是要传递的参数,注意参数名跟后台方法参数名的对应 dataType: 'json', //WebService 返回Json类型 或者 Json/string success: function(re) {

publicstaticstring HandleEvent01(){//code...return"some words"}[WebMethod]

publicstatic Person AjaxMethodThree(string para){returnnew Person { Name = "bill", Country = "China", Favor = newstring[] { "Box", "Music", "Football" } }}[WebMethod]

publicstatic List<Person>AjaxMethodTwo(string para){List<Person>personlist = new List<Person>()

personlist.Add(new Person { Name = "bill", Country = "China", Favor = newstring[] { "Box1", "Film1", "Football1" } })

personlist.Add(new Person { Name = "tom", Country = "USA", Favor = newstring[] { "Box2", "Music2", "Football2" } })

personlist.Add(new Person { Name = "lucy", Country = "Korea", Favor = newstring[] { "Box3", "Music3", "Football3" } })

return personlist}//定义一个Person对象publicclass Person{publicstring Name { getset}

publicstring Country { getset}

publicstring[] Favor { getset}

}复制代码1.返回字符串

json:{"d":"字符串"}

2.返回类型为自定义对象, 前端返回值为一个对应的JSON对象

json:{"d":{"name1":"value1","name2":"value2"...}}

3,返回类型为泛型列表, 前端返回值为对应的JSON对象数组。如果我们异步就是需要返回json格式数据,这样就很方便。同时,除了以WebService的方式被调用,这个页面也可以以普通URL的方式来异步访问,也就是(1)的情况。(5)调用WebService添加web 服务。会生成一个WebServicexxx.asmx以及WebServicexxx.cs.异步程序在WebServicexxx.cs中实现,基本跟(4)差不多。 (6)MVC中的ajax异步实现1.直接在控制器中写public string Ajax(){return "re"}方法,不用额外建视图文件。

2.或者你要返回的内容结构还比较复杂,新建一个_Ajax.cshtml分部视图。控制器中代码:public ActionResult Ajax(){//...your code...return PartialView("_Ajax")

}复制代码前台调用代码: $.post("/控制器名/ajax" , { type:'getData01' },function(re){

})复制代码上面的代码整理到了一个项目里 代码下载

一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象!

利用ajax实现异步交互无非4步:

创建ajax核心对象

与服务器建立连接

向服务器发送请求

接收服务器响应的数据

看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了

首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象.

function

getXhr(){

//

声明XMLHttpRequest对象

var

xhr

=

null

//

根据浏览器的不同情况进行创建

if(window.XMLHttpRequest){

//

表示除IE外的其他浏览器

xhr

=

new

XMLHttpRequest()

}else{

//

表示IE浏览器

xhr

=

new

ActiveXObject('Microsoft.XMLHttp')

}

return

xhr

}

//

创建核心对象

var

xhr

=

getXhr()

通过上述代码我们已经成功的创建了ajax核心对象,我们保存在变量xhr中,接下来提到的ajax核心对象都将以xhr代替.

第二步就是与服务器建立连接,通过ajax核心对象调用open(method,url,async)方法.

open方法的形参解释:

method表示请求方式(get或post)

url表示请求的php的地址(注意当请求类型为get的时候,请求的数据将以问号跟随url地址后面,下面的send方法中将传入null值)

async是个布尔值,表示是否异步,默认为true.在最新规范中这一项已经不在需要填写,因为官方认为使用ajax就是为了实现异步.

xhr.open("get","01.php?user=xianfeng")//这是get方式请求数据

xhr.open("post","01.php")//这是以post方式请求数据

第三步我们将向服务器发送请求,利用ajax核心对象调用send方法

如果是post方式,请求的数据将以name=value形式放在send方法里发送给服务器,get方式直接传入null值

xhr.send("user=xianfeng")//这是以post方式发送请求数据

xhr.send(null)//这是以get方式

第四步接收服务器响应回来的数据,使用onreadystatechange事件监听服务器的通信状态.通过readyState属性获取服务器端当前通信状态.status获得状态码,利用responseText属性接收服务器响应回来的数据(这里指text类型的字符串格式数据).后面再写XML格式的数据和大名鼎鼎的json格式数据.

xhr.onreadystatechange

=

function(){

 //

保证服务器端响应的数据发送完毕,保证这次请求必须是成功的

 if(xhr.readyState

==

4&&xhr.status

==

200){

//

接收服务器端的数据

var

data

=

xhr.responseText

//

测试

console.log(data)

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7934452.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存