zoukankan      html  css  js  c++  java
  • Ajax Get

    First of all verify Server side.

    1. Rename webmethods.aspx to webmethods.asmx.
    2. Verify that you placed  Inside of and  a httpHandlers for asmx extension (ScriptHandlerFactory) also exist in the config:

      <configuration><!--...--><system.web><webServices><protocols><add name="HttpGet"/></protocols></webServices><httpHandlers><!--...--><add verb="*" path="*.asmx"
                 type="System.Web.Script.Services.ScriptHandlerFactory"
                 validate="false"/></httpHandlers></system.web></configuration>
    3. Verify that [ScriptService] attribute ([System.Web.Script.Services.ScriptService] if you like full names) set for your class inherited from System.Web.Services.WebService.

    Now you could test the service. Open in you Web-Browser URL like http://localhost/webmethods.asmx/AjaxGet?id=li1234 If you receive back something like <?xml version="1.0" encoding="utf-8" ?> <string xmlns="http://tempuri.org/">li1234</string>

    You can be sure that you service part works fine.

    Remark: Independ on “ResponseFormat = System.Web.Script.Services.ResponseFormat.Json” attribute the service answer with XML responses if “Content-Type:application/json;” not set  in the request.

    Now we’ll fix the client code. I hope that comments which I placed in the following code explain all.

    One more small remark. In the last part of code I call one more “complex” web method:

    [WebMethod][ScriptMethod(UseHttpGet=true,ResponseFormat=ResponseFormat.Json)]publicOutputDataAjaxGetMore(InputData input){returnnewOutputData(){
            id = input.id,
            message ="it's work!",
            myInt = input.myInt+1};}

    Where

    publicclassOutputData{publicstring id { get;set;}publicstring message { get;set;}publicint myInt { get;set;}}publicclassInputData{publicstring id { get;set;}publicint myInt { get;set;}}

    Now only JavaScript code which use in some places JSON plugin, which could be replaced with Crockford's json2.js, if somebody prefer it.

    var id ="li1234";
    // version 1 - worksvar idAsJson ='"'+ id +'"';// string serializes in JSON format $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGet?id="+ idAsJson, contentType:"application/json; charset=utf-8", success: function(msg){ alert(msg.d);// var msg = {d: "li1234"} }, error: function(res, status){if(status ==="error"){// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTracevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}}});
    // version 2 with respect of JSON plugin $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGet?id="+ $.toJSON(id), contentType:"application/json; charset=utf-8", success: function(msg){ alert(msg.d);// var msg = {d: "li1234"} }, error: function(res, status){if(status ==="error"){// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTracevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}}});
    // version 3 where jQuery will construct URL for us $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGet", data:{id: $.toJSON(id)}, dataType:"json", contentType:"application/json; charset=utf-8", success: function(msg){ alert(msg.d);// var msg = {d: "li1234"} }, error: function(res, status){if(status ==="error"){// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTracevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}}});
    // version 4. We set "Content-Type: application/json" about our data, but we use no // not 'dataType: "json"' parameter. Then we have "Accept: */*" in the request// instead of "Accept: application/json, text/javascript, */*" before.// Everithing work OK like before. $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGet", data:{id: $.toJSON(id)}, contentType:"application/json; charset=utf-8", success: function(msg){ alert(msg.d);// var msg = {d: "li1234"} }, error: function(res, status){if(status ==="error"){// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTracevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}}});
    // version 5. If we don't place "Content-Type: application/json" in our reqest we// receive back XML (!!!) response with "HTTP/1.1 200 OK" header and // "Content-Type: text/xml; charset=utf-8" which will be placed.// How one can read in// http://weblogs.asp.net/scottgu/archive/2007/04/04/json-hijacking-and-how-asp-net-ajax-1-0-mitigates-these-attacks.aspx),// ASP.NET AJAX will not make JSON serialized of response data for// security reasons. $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGet", data:{id: $.toJSON(id)}, dataType:"json",//contentType: "application/json; charset=utf-8", success: function(msg){ alert(msg.d);// var msg = {d: "li1234"} }, error: function (res, status, ex){// the code here will be works because of error in parsing server responseif(res.status !==200){// if not OK// we receive exception in the next line, bevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}else{ alert("status="+ status +" ex="+ ex +" res.status="+ res.status +" res.statusText="+ res.statusText +" res.responseText="+ res.responseText);}}});
    // version 6. Send more komplex data to/from the servicevar myData ={ id:"li1234", myInt:100} $.ajax({ type:"GET", url:"/webmethods.asmx/AjaxGetMore", data:{input:$.toJSON(myData)}, dataType:"json", contentType:"application/json; charset=utf-8", success: function(msg){// var msg = {__type: "Testportal.OutputData", id: "li1234", message: "it's work!", myInt:101} alert("message="+ msg.d.message +", id="+ msg.d.id +", myInt="+ msg.d.myInt);}, error: function(res, status){if(status ==="error"){// errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTracevar errorMessage = $.parseJSON(res.responseText); alert(errorMessage.Message);}}});
  • 相关阅读:
    Map的遍历示例
    vue+jquery使用FormData向后端传递数据和文件,express如何获取
    express+mongodb实现简单登录注册
    vue+express上传头像到数据库中img的路径
    vue父子组件之间相互传值
    express+mysql实现简单的登录注册功能
    固定底部菜单栏,点击跳转到指定路由
    js中的小案例(一)
    使用vue实现购物车功能
    git的日常使用
  • 原文地址:https://www.cnblogs.com/happy-Chen/p/3592269.html
Copyright © 2011-2022 走看看