Jquery異步請求數(shù)據(jù)實例代碼
更新時間:2011年12月28日 22:22:20 作者:
Jquery異步請求數(shù)據(jù)實例代碼,需要的朋友可以參考下。
一、Jquery向aspx頁面請求數(shù)據(jù)
前臺頁面JS代碼:
$("#Button1").bind("click", function () {
$.ajax({
type: "post",
url: "default.aspx",
data: "name=" + $("#Text1").val(),
success: function (result) {
alert(result.msg);
}
});
});
<input id="Text1" type="text" value='張三'/>
<input id="Button1" type="button" value="提交" />
后臺cs代碼:
protected void Page_Load(object sender, EventArgs e)
{
if (Request["name"]!=null)
{
Response.ContentType = "text/json";
Response.Write("{\"msg\":\""+Request["name"]+"\"}");//將數(shù)據(jù)拼湊為Json
Response.End();
}
}
二、Jquery向WebService頁面請求數(shù)據(jù)
$("#Button2").bind("click", function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/HelloWorld",
data: "{name:'" + $("#Text1").val() + "'}",
datatype: "json",
success: function (result) {
alert(result.d);
}
});
});
<input id="Button2" type="button" value="向WebService提交" />
WebService代碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string HelloWorld( string name) {
return "Hello World"+name;
}
}
三、Jquery向ashx請求數(shù)據(jù)和向頁面相同
Js代碼:
$("#Button3").bind("click", function () {
$.ajax({
type: "post",
url: "Handler.ashx",
data: "name=" + $("#Text1").val(),
success: function (result) {
alert(result.msg);
}
});
});
后臺代碼:
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/json";
context.Response.Write("{\"msg\":\"Hello World"+context.Request["name"]+"來自handler.ashx\"}");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
代碼下載
前臺頁面JS代碼:
復(fù)制代碼 代碼如下:
$("#Button1").bind("click", function () {
$.ajax({
type: "post",
url: "default.aspx",
data: "name=" + $("#Text1").val(),
success: function (result) {
alert(result.msg);
}
});
});
復(fù)制代碼 代碼如下:
<input id="Text1" type="text" value='張三'/>
<input id="Button1" type="button" value="提交" />
后臺cs代碼:
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
if (Request["name"]!=null)
{
Response.ContentType = "text/json";
Response.Write("{\"msg\":\""+Request["name"]+"\"}");//將數(shù)據(jù)拼湊為Json
Response.End();
}
}
二、Jquery向WebService頁面請求數(shù)據(jù)
復(fù)制代碼 代碼如下:
$("#Button2").bind("click", function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/HelloWorld",
data: "{name:'" + $("#Text1").val() + "'}",
datatype: "json",
success: function (result) {
alert(result.d);
}
});
});
<input id="Button2" type="button" value="向WebService提交" />
WebService代碼
復(fù)制代碼 代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string HelloWorld( string name) {
return "Hello World"+name;
}
}
三、Jquery向ashx請求數(shù)據(jù)和向頁面相同
Js代碼:
復(fù)制代碼 代碼如下:
$("#Button3").bind("click", function () {
$.ajax({
type: "post",
url: "Handler.ashx",
data: "name=" + $("#Text1").val(),
success: function (result) {
alert(result.msg);
}
});
});
后臺代碼:
復(fù)制代碼 代碼如下:
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/json";
context.Response.Write("{\"msg\":\"Hello World"+context.Request["name"]+"來自handler.ashx\"}");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
代碼下載
您可能感興趣的文章:
- Jquery響應(yīng)回車鍵直接提交表單操作代碼
- jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
- jQuery實現(xiàn)回車鍵(Enter)切換文本框焦點的代碼實例
- jQuery實現(xiàn)當按下回車鍵時綁定點擊事件
- 基于Jquery的實現(xiàn)回車鍵Enter切換焦點
- jquery實現(xiàn)全選、反選、獲得所有選中的checkbox
- JQuery操作textarea,input,select,checkbox方法
- jquery獲取多個checkbox的值異步提交給php的方法
- jquery的ajax異步請求接收返回json數(shù)據(jù)實例
- jquery捕捉回車鍵及獲取checkbox值與異步請求的方法
相關(guān)文章
Jquery實現(xiàn)的table最后一行添加樣式的代碼
有時間需要將表格的最后一行加上樣式,方便閱讀等需要,需要的朋友可以參考下。2010-05-05jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
jQuery Mobile中的button默認提供了很多用于制作移動Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法,結(jié)合實例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03jQuery函數(shù)map()和each()介紹及異同點分析
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點分析,需要的朋友可以參考下2014-11-11JQuery.Ajax()的data參數(shù)類型實例詳解
這篇文章主要介紹了JQuery.Ajax()的data參數(shù)類型實例詳解,需要的朋友可以參考下2015-11-11