JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多。以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式、地址、数据类型,以及回调方法等。下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中。服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web Service,ASP.NET Page,Handler等。

  首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式。GetJsonData()函数完成了这一功能。然后我们通过$.ajax()方法将数据发送到服务端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以将客户端发送的JSON数据对象进行序列化操作,详细的内容可以看这里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

$("#btnSend").click(function() {
$("#request-process-patent").html("正在提交数据,请勿关闭当前窗口...");
$.ajax({
type: "POST",
url: "RequestData.ashx",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(GetJsonData()),
dataType: "json",
success: function (message) {
if (message > 0) {
alert("请求已提交!我们会尽快与您取得联系");
}
},
error: function (message) {
$("#request-process-patent").html("提交数据失败!");
}
});
}); function GetJsonData() {
var json = {
"classid": 2,
"name": $("#tb_name").val(),
"zlclass": "测试类型1,测试类型2,测试类型3",
"pname": $("#tb_contact_people").val(),
"tel": $("#tb_contact_phone").val()
};
return json;
}

  再来看看服务端的代码,RequestData.ashx.

[Serializable]
public class RequestDataJSON
{
public int classid { get; set; }
public string name { get; set; }
public string zlclass { get; set; }
public string pname { get; set; }
public string tel { get; set; }
} /// <summary>
/// Summary description for RequestData
/// </summary>
public class RequestData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int num = ;
context.Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream);
var stream = sr.ReadToEnd();
var javaScriptSerializer = new JavaScriptSerializer();
var PostedData = javaScriptSerializer.Deserialize<RequestDataJSON>(stream); tb_query obj = new tb_query();
obj.classid = PostedData.classid;
obj.name = PostedData.name;
obj.zlclass = PostedData.zlclass;
obj.pname = PostedData.pname;
obj.tel = PostedData.tel;
obj.ip = context.Request.UserHostAddress.ToString();
obj.posttime = DateTime.Now.ToString(); try
{
using (var ctx = new dbEntities())
{
ctx.tb_query.AddObject(obj);
num = ctx.SaveChanges();
}
}
catch (Exception msg)
{
context.Response.Write(msg.Message);
} context.Response.ContentType = "text/plain";
context.Response.Write(num);
} public bool IsReusable
{
get
{
return false;
}
}
}

  定义一个带有Serializable特征属性的类RequestDataJSON用来将客户端数据进行反序列化,从而获取到数据并存入数据库。上述代码中使用了EntityFramework,从而使得数据库的交互代码变得很简洁。返回结果有两种,对应ajax中的回调函数success()和error()。在success()回调函数中,如果返回结果的值大于0,则表示通过EntityFramework添加到数据库中的记录数;在error()回调函数中,返回结果则显示了失败的具体信息。

  RequestData类继承了IHttpHandler接口,表明它是以同步的方式处理客户端请求。当然,你也可以将其改为继承IHttpAsyncHandler接口来处理异步请求,代码接口大同小异。

JQuery以JSON方式提交数据到服务端的更多相关文章

  1. 转载 ----HTML5 ---js实现json方式提交数据到服务端

    json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看.   大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...

  2. ajax post 提交数据到服务端时中文乱码解决方法

    get 方式提交数据到服务端不会乱码,但对数据量有限制;post 可以提交大数据量,但中文会发生乱码,解决方法: 在JS上用使用 encodeURIComponent 对字符编码处理: student ...

  3. json提交数据到服务端

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...

  4. Http协议:客户端提交数据给服务端和从服务端获得数据,像WebView也是向百度的服务端发出一条Http请求,服务端返回HTML页面,客户端(浏览器)解析后展示出页面

    提交数据和获得数据的方式有很多,这里介绍一种,使用HttpURLConnection来向服务器提交数据或者获得数据. 获得数据: //传入网址,获得请求网页数据(XML文件数据或JSON文件数据) p ...

  5. Android 使用Post方式提交数据(登录)

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

  6. 苹果微信浏览器不能post方式提交数据问题

    form表单中采用post方式提交数据时,在苹果的微信浏览器中无法传递,安卓的可以 如图: 在controller中获取该数据为 null 将表单的提交方式修改为get就能够获取到 现在采用Ajax方 ...

  7. Android 采用post方式提交数据到服务器

    接着上篇<Android 采用get方式提交数据到服务器>,本文来实现采用post方式提交数据到服务器 首先对比一下get方式和post方式: 修改布局: <LinearLayout ...

  8. Android(java)学习笔记213:开源框架post和get方式提交数据(qq登录案例)

    1.前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...

  9. Android 使用Post方式提交数据

    在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...

随机推荐

  1. 真机在wifi下调试android程序

    大家好,最近在学习android程序由于手机接口问题,调试程序的时候老是接触不良而不能正常调试,因此感到相当苦恼,于是在网上查找无线调试android的方法.经过研究和尝试现已成功无线调试程序,方法分 ...

  2. jQuery.bind() 函数详解

    bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 执行bind()时,事件处理函数会绑定到每个匹配元素上.因此你使用bind( ...

  3. NXP开源自动驾驶计算平台Bluebox 打造现实无人汽车

    知名半导体制造商恩智浦NXP已经准备好了自家的自动驾驶计算开源平台Bluebox,将为汽车制造商提供现成的一体化自动 驾驶计算解决方案.专为自动驾驶设备的BlueBox中央计算引擎.不仅能够为无人驾驶 ...

  4. 我所了解的 京东、携程、eBay、小米 的 OpenStack 云

    参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文试着凭借影响加网络搜索,按照自己的理解,对这些公司的 OpenStac ...

  5. 把 TBytes 转换为十六进制字符串

    function BytestoHexString(ABytes: TBytes; len: Integer): AnsiString; begin   SetLength(Result, len*) ...

  6. 禅道Linux一键安装版

    禅道Linux一键安装版 Linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道.从7.3版本开始,linux一键安装包分为32位和64位两个包,大家 ...

  7. linux关闭防火墙

    查看防火墙状态: sudo service iptables status linux关闭防火墙命令: sudo service iptables stop linux启动防火墙命令: sudo se ...

  8. win下搭建uvm环境

    UVM验证方法学,很好的验证工具,下面用ModelSim-uvm做一个Hello world. 1.安装modelsim se 10.1a 2.下载uvm_1.1d  uvm-1.1d.tar.gz  ...

  9. 【转】virtualenv -- python虚拟沙盒

    有人说:virtualenv.fabric 和 pip 是 pythoneer 的三大神器. 不管认不认同,至少要先认识一下,pip现在倒是经常用到,virtualenv第一次听说,不过,总得尝试一下 ...

  10. 【转】Mysql 存储引擎中InnoDB与Myisam的主要区别

    1, 事务处理 innodb 支持事务功能,myisam 不支持. Myisam 的执行速度更快,性能更好.   2,select ,update ,insert ,delete 操作   MyISA ...