JQuery九种与后台交互数据的方法（ajax）
2013-07-02 11:57
597 查看
首先创建一个一般处理程序“ResponseJson.ashx”，手动拼接字符串返回Json格式：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<cityInfo> cityInfos = new List<cityInfo>()
{
new cityInfo(){cityID=1,cityName="北京"},
new cityInfo(){cityID=2,cityName="上海"},
new cityInfo(){cityID=3,cityName="南京"},
new cityInfo(){cityID=4,cityName="深圳"},
new cityInfo(){cityID=5,cityName="广州"}
};
StringBuilder sb = new StringBuilder();
sb.Append("[");
foreach (cityInfo cityInfo in cityInfos)
{
sb.Append("{");
sb.AppendFormat("\"cityID\":{0},\"cityName\":\"{1}\"", cityInfo.cityID, cityInfo.cityName);
sb.Append("}");
sb.Append(",");
}
string str = sb.ToString().TrimEnd(',');
str += "]";
context.Response.Write(str);
// 或者将对象序列化成Json格式 和拼接相比这种方式较为死板
//System.Web.Script.Serialization.JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
//string Json = JSSerializer.Serialize(cityInfos);
//context.Response.Write(Json);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class cityInfo
{
public string cityName
{
get;
set;
}
public int cityID
{
get;
set;
}
}
然后创创建一个Html页“JqueryGetJson.htm”
下面是九种获取后台数据的方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/AjaxForm.js" type="text/javascript"></script>
<script type="text/javascript">
// 1.JQuery的getJson方式
$(function () {
$("#JqueryGetJson").click(function () {
$.getJSON("ResponseJson.ashx", "a=3&b=4", function (data) {
alert(data[1].cityName);
});
});
});
// 2.JQuery的get方式
$(function () {
$("#JQ_GEt").click(function () {
$.get("ResponseJson.ashx", "x=9&y=9", function (data) {
alert(data[2].cityName);
},"json");
});
});
// 3.JQuery的post方式
$(function () {
$("#JQ_Post").click(function () {
$.post("ResponseJson.ashx", "n=10", function (data) {
alert(data[1].cityName);
},"json");
});
});
// 4.JQuery的 Ajax方式的get方式
$(function () {
$("#JQ_AjaxGet").click(function () {
$.ajax(
{
url: "ResponseJson.ashx",
data: "s=6",
type: "get",
async: true, // 如果为true :在执行异步请求的时候会另起一个线程去执行
success: function (data) {
$("#divDemo").text(data);
},
error: function () {
alert("服务器错误！");
}
}
);
});
});
// 5.JQuery的 Ajax方式的post方式
$(function () {
$("#JQ_AjaxPost").click(function () {
$.ajax(
{
url: "ResponseJson.ashx",
data: "s=6",
type: "post",
success: function (data) {
$("#divDemo").text(data);
},
error: function () {
alert("服务器错误！");
}
}
);
});
});
// 6.JQuery的load的方式 适用于：把数据放到html指定的位置中
$(function () {
$("#JQ_load").click(function () {
$("#divDemo").load("ResponseJson.ashx", "h=8", function (data) {
alert(data);
});
});
});
// 7.ajaxSubmit的方式，是通过插件AjaxForm实现的，所以要引入Jquery的插件AjaxForm。这种方式可以向后台提交所有表单数据，不需要指定数据（根据ID）
// 这种方式的好处是：当向后台提交大量的表单数据时，就可以很方便
$("#JQ_AjaxSubmit").click(function () {
$("#frm").ajaxSubmit({
url: "ResponseJson.ashx",
type: "post", // 或者get方式
dataType:"text", // 返回值的类型 默认是文本 也可以是 json
success: function (suc) {
alert(suc);
},
error: function (err) {
alert(err);
}
});
});
// 8.ajaxSubmit的get方式
$("#JQ_AjaxSubmit").click(function () {
$("#frm").ajaxSubmit({
url: "ResponseJson.ashx",
type: "get", // 或者get方式
dataType:"text", // 返回值的类型 默认是文本 也可以是 json
success: function (suc) {
alert(suc);
},
error: function (err) {
alert(err);
}
});
});
</script>
<style type="text/css">
#divDemo{display:block;width:500px;height:20px;}
</style>
</head>
<body>
<form id="frm">
<input type="button" value="JQuery与后台交互" id="JqueryGetJson" />
<input type="button" value="JQuery的Get方式与后台交互" id="JQ_GEt" />
<input type="button" value="JQuery的Post方式与后台交互" id="JQ_Post" /><br />
<input type="button" value="JQuery的ajax的get方式与后台交互" id="JQ_AjaxGet" />
<input type="button" value="JQuery的ajax的post方式与后台交互" id="JQ_AjaxPost" />
<input type="button" value="JQuery的load与后台交互" id="JQ_load" />
<input type="button" value="JQuery的插件AjaxForm获取与后台交互" id="JQ_AjaxSubmit" />
<div id="divDemo">
</div>
</form>
</body>
</html>
// 9.微软在MVC里自带的Ajax异步
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script> @*隐式的表单验证*@
<script type="text/javascript">
function afterSuccess() {
alert('haha');
};
</script>
</head>
<body>
<div>
@{
using (@Ajax.BeginForm("Index", new AjaxOptions()
{
Confirm = "咋样啊 ……",
HttpMethod = "Post", // 异步请求的方式
OnSuccess = "afterSuccess", // 成功后调用的回调函数
UpdateTargetId = "#resultDiv", // 成功后选择改变的表单
InsertionMode = InsertionMode.Replace
}))
{
<input type="submit" value="提交" />
}
}
</div>
<div id="resultDiv">
</div>
</body>
</html>
// 上面的方法，根据自己的情况去运用上面的方法
// 如果获取的数据是字符串格式，那么把字符串转成JSON格式数据
var str;
$.parseJSON(str);
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<cityInfo> cityInfos = new List<cityInfo>()
{
new cityInfo(){cityID=1,cityName="北京"},
new cityInfo(){cityID=2,cityName="上海"},
new cityInfo(){cityID=3,cityName="南京"},
new cityInfo(){cityID=4,cityName="深圳"},
new cityInfo(){cityID=5,cityName="广州"}
};
StringBuilder sb = new StringBuilder();
sb.Append("[");
foreach (cityInfo cityInfo in cityInfos)
{
sb.Append("{");
sb.AppendFormat("\"cityID\":{0},\"cityName\":\"{1}\"", cityInfo.cityID, cityInfo.cityName);
sb.Append("}");
sb.Append(",");
}
string str = sb.ToString().TrimEnd(',');
str += "]";
context.Response.Write(str);
// 或者将对象序列化成Json格式 和拼接相比这种方式较为死板
//System.Web.Script.Serialization.JavaScriptSerializer JSSerializer = new JavaScriptSerializer();
//string Json = JSSerializer.Serialize(cityInfos);
//context.Response.Write(Json);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class cityInfo
{
public string cityName
{
get;
set;
}
public int cityID
{
get;
set;
}
}
然后创创建一个Html页“JqueryGetJson.htm”
下面是九种获取后台数据的方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/AjaxForm.js" type="text/javascript"></script>
<script type="text/javascript">
// 1.JQuery的getJson方式
$(function () {
$("#JqueryGetJson").click(function () {
$.getJSON("ResponseJson.ashx", "a=3&b=4", function (data) {
alert(data[1].cityName);
});
});
});
// 2.JQuery的get方式
$(function () {
$("#JQ_GEt").click(function () {
$.get("ResponseJson.ashx", "x=9&y=9", function (data) {
alert(data[2].cityName);
},"json");
});
});
// 3.JQuery的post方式
$(function () {
$("#JQ_Post").click(function () {
$.post("ResponseJson.ashx", "n=10", function (data) {
alert(data[1].cityName);
},"json");
});
});
// 4.JQuery的 Ajax方式的get方式
$(function () {
$("#JQ_AjaxGet").click(function () {
$.ajax(
{
url: "ResponseJson.ashx",
data: "s=6",
type: "get",
async: true, // 如果为true :在执行异步请求的时候会另起一个线程去执行
success: function (data) {
$("#divDemo").text(data);
},
error: function () {
alert("服务器错误！");
}
}
);
});
});
// 5.JQuery的 Ajax方式的post方式
$(function () {
$("#JQ_AjaxPost").click(function () {
$.ajax(
{
url: "ResponseJson.ashx",
data: "s=6",
type: "post",
success: function (data) {
$("#divDemo").text(data);
},
error: function () {
alert("服务器错误！");
}
}
);
});
});
// 6.JQuery的load的方式 适用于：把数据放到html指定的位置中
$(function () {
$("#JQ_load").click(function () {
$("#divDemo").load("ResponseJson.ashx", "h=8", function (data) {
alert(data);
});
});
});
// 7.ajaxSubmit的方式，是通过插件AjaxForm实现的，所以要引入Jquery的插件AjaxForm。这种方式可以向后台提交所有表单数据，不需要指定数据（根据ID）
// 这种方式的好处是：当向后台提交大量的表单数据时，就可以很方便
$("#JQ_AjaxSubmit").click(function () {
$("#frm").ajaxSubmit({
url: "ResponseJson.ashx",
type: "post", // 或者get方式
dataType:"text", // 返回值的类型 默认是文本 也可以是 json
success: function (suc) {
alert(suc);
},
error: function (err) {
alert(err);
}
});
});
// 8.ajaxSubmit的get方式
$("#JQ_AjaxSubmit").click(function () {
$("#frm").ajaxSubmit({
url: "ResponseJson.ashx",
type: "get", // 或者get方式
dataType:"text", // 返回值的类型 默认是文本 也可以是 json
success: function (suc) {
alert(suc);
},
error: function (err) {
alert(err);
}
});
});
</script>
<style type="text/css">
#divDemo{display:block;width:500px;height:20px;}
</style>
</head>
<body>
<form id="frm">
<input type="button" value="JQuery与后台交互" id="JqueryGetJson" />
<input type="button" value="JQuery的Get方式与后台交互" id="JQ_GEt" />
<input type="button" value="JQuery的Post方式与后台交互" id="JQ_Post" /><br />
<input type="button" value="JQuery的ajax的get方式与后台交互" id="JQ_AjaxGet" />
<input type="button" value="JQuery的ajax的post方式与后台交互" id="JQ_AjaxPost" />
<input type="button" value="JQuery的load与后台交互" id="JQ_load" />
<input type="button" value="JQuery的插件AjaxForm获取与后台交互" id="JQ_AjaxSubmit" />
<div id="divDemo">
</div>
</form>
</body>
</html>
// 9.微软在MVC里自带的Ajax异步
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js"></script> @*隐式的表单验证*@
<script type="text/javascript">
function afterSuccess() {
alert('haha');
};
</script>
</head>
<body>
<div>
@{
using (@Ajax.BeginForm("Index", new AjaxOptions()
{
Confirm = "咋样啊 ……",
HttpMethod = "Post", // 异步请求的方式
OnSuccess = "afterSuccess", // 成功后调用的回调函数
UpdateTargetId = "#resultDiv", // 成功后选择改变的表单
InsertionMode = InsertionMode.Replace
}))
{
<input type="submit" value="提交" />
}
}
</div>
<div id="resultDiv">
</div>
</body>
</html>
// 上面的方法，根据自己的情况去运用上面的方法
// 如果获取的数据是字符串格式，那么把字符串转成JSON格式数据
var str;
$.parseJSON(str);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery ajax post 方法传送object 的list 数据给后台
- jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法
- jquery $.get()、$.ajax()与后台servlet交互方法
- JQuery拓展方法之表单数据转Object—从而ajax post到后台
- jquery的$.ajax()利用json数据类型与php后台交互
- Ajax、jquery实现前后台数据交互
- Jquery之Ajax(页面后台间数据交互)
- jQuery的ajax()检验用户名；通过jQuery的load()/get()/post()方法实现；使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- Struct2前台后台数据交互jquery+ajax
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- jQuery中ajax请求后台返回json数据并渲染HTML的方法
- 摸索出来的chrom调试前后台数据(Java&&Ajax)交互的方法分享一下咯！！！
- 一个完整的采用Jquery的ajax 方法进行前后台交互的案例
- 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- jquery的$.ajax()利用FormData数据类型与php后台交互
- jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
- 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- 用jquery +ajax 实现与php后台交互json数据
- jquery 通过ajax请求获取后台数据显示在表格上的方法