文档库 最新最全的文档下载
当前位置:文档库 › JQuery以JSON方式提交数据到服务端

JQuery以JSON方式提交数据到服务端

JQuery以JSON方式提交数据到服务端
JQuery以JSON方式提交数据到服务端

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

首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式。GetJsonData()函数完成了这一功能。然后我们通过$.ajax()方法将数据发送到服务端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以将客户端发送的数据转换成JSON对象,详细的内容可以看这里

$("#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 description for RequestData

///

public class RequestData : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

int num = 0;

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(stream);

tb_query obj = new tb_query();

obj.classid = PostedData.classid;

https://www.wendangku.net/doc/8a14715645.html, = https://www.wendangku.net/doc/8a14715645.html,;

obj.zlclass = PostedData.zlclass;

obj.pname = PostedData.pname;

obj.tel = PostedData.tel;

obj.ip = https://www.wendangku.net/doc/8a14715645.html,erHostAddress.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接口来处理异步请求,代码接口大同小异。

后台转换JSON数据类型,前台解析JSON数据等等例子总结

后台转换JSON数据类型,前台解析JSON数据等等例子总结 JSON对象: JSONObject obj = new JSONObject(); obj.put("result", 0); obj.put("message", message); return obj.toJSONString(); 前台解析: Success:function(data){ var result = data.result; var message = data.message; } json对象中有json对象的写法: Objstr为一个JSONObject obj的String转换 private String getsuccess(String objstr,int number){ JSONObject obj = new JSONObject(); obj.put("result", 1); obj.put("obj", objstr); obj.put("number", number); return obj.toJSONString(); }

前台解析: Picjson为success返回的data var result = picjson.result; if (result==1) { var objdata = picjson.obj; var data = eval('(' + objdata + ')'); var num = picjson.number; picurl = null; showpiclist(data, num); } else{ alert(picjson.message); picurl = null; } list转成json对象 需要的包: https://www.wendangku.net/doc/8a14715645.html,mons-lang.jar https://www.wendangku.net/doc/8a14715645.html,mons-beanutils.jar https://www.wendangku.net/doc/8a14715645.html,mons-collections.jar https://www.wendangku.net/doc/8a14715645.html,mons-logging.jar

jQuery+AJAX+JSON

jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架,一个轻量级的JavaScript类库。 jQuery的核心理念是Write less,Do more。 使用jQuery可以兼容各种浏览器,方便的处理HTML、Events、动画效果等,并且方便的为网站提供AJAX交互。 2.jQuery的特点: 利用选择器来查找要操作的节点,然后将这些节点封装成一个jQuery对象,通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。 好处:a、兼容性更好;b、代码更简洁 3.编程步骤: step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象?? jQuery对象是jQuery对底层对象的一个封装,只有创建了这个对象,才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易,外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象

var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化,通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器?? jQuery选择器是一种类似CSS选择器的特殊说明符号,能够帮助jQuery 定位到要操作的元素上,使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素

Json数据格式的使用方法入门教程

JSON 数据格式解析 和 XML 一样,JSON 也是基于纯文本的数据格式。由于 JSON 天生是为JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用 JSON 传输一个简单的 String,Number,Boolean,也可以传输一个数组,或者一个复杂的Object 对象。 String,Number 和 Boolean 用 JSON 表示非常简单。例如,用 JSON 表示一个简单的 String “ abc ”,其格式为: "abc" 除了字符 ",\,/ 和一些控制符(\b,\f,\n,\r,\t)需要编码外,其他 Unicode 字符可以直接输出。下图是一个 String 的完整表示结构: 图 1. String 的完整表示结构 一个 Number 可以根据整型或浮点数表示如下:

图 2. Number 的表示结构 这与绝大多数编程语言的表示方法一致,例如: 12345(整数) -3.9e10(浮点数) Boolean 类型表示为 true 或 false 。此外,JavaScript 中的 null 被表示为 null,注意,true、false 和 null 都没有双引号,否则将被视为一个String 。 JSON 还可以表示一个数组对象,使用 [] 包含所有元素,每个元素用逗号分隔,元素可以是任意的 Value,例如,以下数组包含了一个 String,Number,Boolean 和一个 null: Object 对象在 JSON 中是用 {} 包含一系列无序的 Key-Value 键值对表示的,实际上此处的 Object 相当于 Java 中的 Map,而不是Java 的 Class 。注意 Key 只能用 String 表示。 例如,一个 Address 对象包含如下 Key-Value:

Jquery Ajax 异步处理Json数据

啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在https://www.wendangku.net/doc/8a14715645.html,里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的. 代码如下: 前台页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 无标题页