보다 간결한 Ajax 구현을 위해 jQuery Ajax를 사용하여 웹 서비스에 요청

과거에는 ajax를 할 때 일반 처리 프로그램(.ashx)이나 웹 서비스(.asmx)에 의존해야 했고, 요청마다 그런 파일을 만들어야 했는데요, 이렇게 해서 ashx가 많이 생성됩니다. 파일은 더 귀찮고, 너무 많으면 보기에 좋지 않습니다.

이제 webMethod 메소드를 사용하여 Ajax 구현을 더 간결하게 만들 수 있습니다

1 .WebMethod를 사용하고 싶으면 반드시

System.Web.Services를 사용하여

네임스페이스를 참조하는 것이 필수입니다. 여기서는 개발의 편의를 위해 특별히 새 페이지를 만들었습니다. WebMethod 메소드를 작성하는 것이 더 편리할 것이고, Ajax 요청이 많은 경우 페이지 이름에 따라 몇 개의 페이지를 더 생성할 수 있습니다. 예를 들어, 배경 코드는 다음과 같습니다.

/// <summary>
/// 根据任务ID获取任务名称,任务完成状态,任务数量
/// </summary>
/// <param name="id">任务ID</param>
/// <returns></returns>
[WebMethod]
public static string GetMissionInfoById(int id)
{
CommonService commonService = new CommonService();
DataTable table = commonService.GetSysMissionById(id);
　　　 //.....
return "false";
}

백그라운드의 WebMethod 메소드는 공개 정적 메소드여야 하며, 작동하려면 WeMethod 속성을 메소드에 추가해야 합니다. 이 메서드의 Session에

[WebMethod(EnableSession = true)]//或[WebMethod(true)]
public static string GetMissionInfoById(int id)
{
CommonService commonService = new CommonService();
DataTable table = commonService.GetSysMissionById(id);
　　　 //.....
return "false";
}

속성을 ​​추가해야 합니다.

2. 이제 백그라운드 WebMethod 메서드가 작성되었으므로 JQuery를 사용해 보겠습니다. 여기가 더 간결합니다.

$.ajax({
type: "POST",
contentType: "application/json",
url: "WebMethodAjax.aspx/GetMissionInfoById",
data: "{id:12}",
dataType: "json",
success: function()
　　　{
　　　　　//请求成功后的回调处理.
　　　},
　　　error:function()
{
//请求失败时的回调处理.
}
});

여기 Jquery Ajax의 여러 매개변수에 대한 간략한 설명, 유형: 요청 유형, 게시물을 여기에서 사용해야 합니다. WebMethod 메소드는 서버에 정보를 보낼 때 게시 유형 요청

contentType: 콘텐츠 인코딩 유형만 허용합니다. 여기서는 application/json을 사용해야 합니다

url: "파일 이름(접미사 포함)/메서드 이름" 형식의 요청된 서버 측 핸들러에 대한 경로

데이터: 매개변수 목록. 여기의 매개변수는 json 형식의 문자열이어야 하며 "{aa:11,bb:22,cc:33, ...}"와 같은 문자열 형식이어야 한다는 점을 기억하세요.

작성한 내용이 문자열이 아닌 경우 jquery는 이를 문자열로 직렬화하므로 서버 측에서 수신되는 내용은 json 형식이 아니며 매개변수가 없더라도 비워둘 수 없습니다. . 위의 예와 같이 "{}"로 작성해야 합니다. 많은 사람들이 실패하는데, 이것이 바로 그 이유이다.

dataType: 서버에서 반환하는 데이터 유형입니다. 반드시 json이어야 하며 그 외의 것은 유효하지 않습니다. 웹 서비스는 json 형식으로 데이터를 반환하므로 해당 형식은 {"d":"...."}입니다. 성공: 요청이 성공한 후 콜백 함수입니다. 여기에서 반환된 데이터로 원하는 모든 작업을 수행할 수 있습니다.

일부 매개변수 값이 고정되어 있는 것을 볼 수 있으므로 재사용성의 관점에서 jquery를 확장하고 위 함수를 간단하게 캡슐화할 수 있습니다. 스크립트 파일은 jquery.extend.js라고 합니다. 내부에 ajaxWebService라는 메소드를 작성합니다(webmethod는 실제로 WebService이므로 이 메소드는 *.asmx 요청에도 유효합니다). 코드는 다음과 같습니다.

///<summary>
///jQuery原型扩展，重新封装Ajax请求WebServeice
///</summary>
///<param name="url" type="String">处理请求的地址</param>
///<param name="dataMap" type="String">参数，json格式的字符串</param>
///<param name="fnSuccess" type="Function">请求成功后的回调函数</param>
$.ajaxWebService = function(url, dataMap, fnSuccess) {
$.ajax({
type: "POST",
contentType: "application/json",
url: url,
data: dataMap,
dataType: "json",
success: fnSuccess
});
}

좋습니다. 다음과 같이 웹메소드 메소드를 호출할 수 있습니다.

$.ajaxWebService("WebMethodAjax.aspx/GetMissionInfoById", "{id:12}", function(result) {//......});

여기에 또 다른 캡슐화가 있는데, 이전에 관리자와 함께 본 캡슐화가 꽤 좋은 것 같습니다. 🎜>

먼저 js 파일을 만듭니다. 파일 이름은 여러분에게 달려 있습니다. 여기서는 CommonAjax.js에 두 가지 메서드를 구축했습니다.

function json2str(o) {
var arr = [];
var fmt = function(s) {
if (typeof s == 'object' && s != null) return json2str(s);
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
}
for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
return '{' + arr.join(',') + '}';
}
function Invoke(url, param) {
var result;
$.ajax({
type: "POST",
url: url,
async: false,
data: json2str(param),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
result = msg.d;
},
error: function(r, s, e) {
throw new Error();
}
});
return result;
}

포그라운드에서의 호출은 비교적 간단합니다.

var result = Invoke("WebMethodAjax.aspx/GetMissionInfoById", { "name": arguments.Value, "id": id });

그러나 이 방법을 사용하는 경우 매개변수를 백그라운드로 전달할 때 주의해야 합니다. WebMethod 메소드. Json 키는 WebMethod 메소드의 형식 매개변수와 동일해야 하며, 그렇지 않으면 요청이 실패합니다. 백그라운드 메소드는 다음과 같습니다:

[WebMethod]
public static string GetMissionInfoById(int Id,string name)
{
　　　//.....　
return "false";
}

두 개의 매개변수를 전달해야 하며 형식은 다음과 같습니다.

[csharp] view plain copy print?
{"Id":23,"name":"study"}

위는 편집기의 Jquery Ajax를 사용하여 보다 간결한 Ajax를 구현하기 위한 웹 서비스 요청에 대한 소개입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

보다 간결한 Ajax를 구현하기 위해 jQuery Ajax를 사용하여 웹 서비스를 요청하는 것과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!