JQuery以JSON方式提交数据到服务端
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方式提交数据到服务端的更多相关文章
- 转载 ----HTML5 ---js实现json方式提交数据到服务端
json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看. 大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...
- ajax post 提交数据到服务端时中文乱码解决方法
get 方式提交数据到服务端不会乱码,但对数据量有限制;post 可以提交大数据量,但中文会发生乱码,解决方法: 在JS上用使用 encodeURIComponent 对字符编码处理: student ...
- json提交数据到服务端
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...
- Http协议:客户端提交数据给服务端和从服务端获得数据,像WebView也是向百度的服务端发出一条Http请求,服务端返回HTML页面,客户端(浏览器)解析后展示出页面
提交数据和获得数据的方式有很多,这里介绍一种,使用HttpURLConnection来向服务器提交数据或者获得数据. 获得数据: //传入网址,获得请求网页数据(XML文件数据或JSON文件数据) p ...
- Android 使用Post方式提交数据(登录)
在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...
- 苹果微信浏览器不能post方式提交数据问题
form表单中采用post方式提交数据时,在苹果的微信浏览器中无法传递,安卓的可以 如图: 在controller中获取该数据为 null 将表单的提交方式修改为get就能够获取到 现在采用Ajax方 ...
- Android 采用post方式提交数据到服务器
接着上篇<Android 采用get方式提交数据到服务器>,本文来实现采用post方式提交数据到服务器 首先对比一下get方式和post方式: 修改布局: <LinearLayout ...
- Android(java)学习笔记213:开源框架post和get方式提交数据(qq登录案例)
1.前面提到Http的get/post方式 . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...
- Android 使用Post方式提交数据
在Android中,提供了标准Java接口HttpURLConnection和Apache接口HttpClient,为客户端HTTP编程提供了丰富的支持. 在HTTP通信中使用最多的就是GET和POS ...
随机推荐
- CoreData创建
云盘-->CoreData文件 一 创建表打开点击增加的Entity名字应该与 EntityForName一致 二 创建NSManageObject SubClass 三 拖进CoreD ...
- Swift3.0基础语法学习<三>
枚举和结构体: // // ViewController3.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/16. // Copyright ...
- jquery 滚动到底部加载
var body_ = $(window); var indexPage = 2; var pageCount = <?php echo $pageCount;?>; var _ajaxR ...
- 最新做路径动画必备Simple Waypoint System5.1.1最新做路径动画必备Simple Waypoint System5.1.1
NEW IN 5.0: up to 400% faster thanks to the DOTween engine! UnityEvents, new movement options and mo ...
- CentOS 7下源码安装MySQL 5.7
网上说linux安装mysql服务分两种安装方法: ①源码安装,优点是安装包比较小,只有几十M左右,缺点是安装依赖的库多,安装编译时间长,安装步骤复杂容易出错: ②使用官方编译好的二进制文件安装,优点 ...
- CSS透明属性详解
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...
- Android(Xamarin)之旅(三)
前面两篇说到了Xamarin的安装和一些简单的控件,今天来说说一些对话框和提示信息,以及简单的布局元素. 一.对话框和提示信息 一.对话框 我们首先从简单的对话框开始. 1.普通对话框 在androi ...
- iOS获取通讯录 电话号码与姓名
// 还是导入 #import <AddressBook/AddressBook.h> - (void)fetchAddressBookBeforeIOS9{ ABAddressBookR ...
- 何为“精通Java”
何为精通Java?本来Java仅仅是一门语言,但从应用技术的角度来看,精通Java是可以无边无际的.很可能你可以对James说:我精通J2EE.JVM.Java服务器.大数据等等一些和Java相关的应 ...
- C复数的四则运算
#include<stdio.h> void judge(int True,int Fake) { if (True == 0) { if (Fake == ...