如何通過Ajax JSON將表單數據發送到我的cs頁面的WebMethod？

Question

我想通過jquery.ajax和json發送我的表單數據到webmethod，但我無法發送或在日誌中得到任何錯誤。任何人都可以通過這個指導我，或者我會錯在哪裏？ .ajax方法沒有執行並給出警告爲「未定義」？

function Submit() { 
    debugger; 
    var advantages = []; 
    var features = []; 
    var Elig_crit = []; 
    var Elig_value = []; 

    $('#AdvantagesContainer .Advantages').each(function() { 

     //var txtAdvantages = $(".Advantages") 
     //for (var i = 0; i < txtAdvantages.length; i++) { 


     advantages.push($(this).val()); 

     //} 
    }); 

    $('#FeaturesContainer .Features').each(function() { 


     features.push($(this).val()); 
    }); 


    $('.Eligibility .EligibilityCrit_TxtBox').each(function() { 

     Elig_crit.push($(this).val()); 

    }); 


    $('.Eligibility .EligibilityVal_TxtBox').each(function() { 

     Elig_value.push($(this).val()); 
    }); 

    debugger; 
    var objData = { Category: $('#ddlInsCategory option:selected').val(), Company: $("#ddlCompanyName option:selected").val(), PlanName: $("#<%=txtPlanName.ClientID%>").val(), PlanDesc: $("#<%=txtPlanDesc.ClientID%>").val(), features: features, advantages: advantages, Criteria: Elig_crit, Value: Elig_value } 
    //var jsonData = JSON.stringyfy({ objData: objData }); 
    debugger; 
    $.ajax({ 
     type: "POST", 
     url: "Edit.ascx/Save", 
     data: objData, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: OnSuccess, 
     error: function (response) { 
      alert(response.d); 
     } 
    }); 
} 

function OnSuccess(response) { 
    alert("Success"); 
} 

目前我還沒有寫任何代碼到我的webmethod。我剛剛創建了框架以查看json拋出哪些數據。

[WebMethod] 
    public static void Save(object objData) 
    { 


    } 

Answer 1

您可以在服務器端創建強類型。這將有適當的映射和非常簡單和推薦的方式來使用jQuery ajax。

只需創建在您的服務器端自定義類型，其具有的屬性名稱與在JavaScript對象中的key這樣的匹配（請確保您有相同的名稱和相應更改數據類型）： -

public class Foo 
{ 
    public string Category { get; set; } 
    public string Company { get; set; } 
    public string PlanName { get; set; } 
    public string PlanDesc { get; set; } 
    public List<string> features{ get; set; } 
    public List<string> advantages { get; set; } 
    public List<string> Criteria{ get; set; } 
    public List<string> Value{ get; set; } 
} 

然後，改變你的WebMethod接受這種類型的參數： -

[WebMethod] 
public static void Save(Foo objData) 
{ 


} 

最後從客戶端發送的JSON數據： -

var objData = { Category: $('#ddlInsCategory option:selected').val(), .... 
var jsonData = JSON.stringify({ objData: objData }); 

Answer 2

有幾種方法，你如何做到這一點：

因爲你已標記的WebMethod。您可以添加一個scriptManager到您的服務器端表單，這將使您的所有WebMethods在客戶端可用。

使用的ScriptManager

1. 添加腳本經理將您的服務器端的形式

2. 的情況下，如果你使用友好的URL，你需要手動添加的頁面擴展。 ALSO在你的RouteConfig中設置RedirectMode.Off，如果你有redirectMode.permanent，你的ajax調用將失敗。

    if (stringEndsWith(PageMethods.get_path(), "aspx")) { 
        } else { 
         PageMethods.set_path(PageMethods.get_path() + '.aspx'); 
        }; 
   

從你的JavaScript使用PageMEthods直接打電話給你的WebMethods。

PageMethods.FN_TEST(your_parameter, onSucess, onError); 
      function onSucess(result) { 
       alert(result); 

      }, 
      function onError(result) { 
       alert('Something wrong.'); 
      } 

你的頁面：

using System.Web.Services; 
using System.Web.Script.Services; 

讓你的網頁腳本處理服務通過添加ScriptService

[ScriptService] 
public partial class your_page : System.Web.UI.Page{ 

...和你的Web方法

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public static void FN_TEST(string iParam) 
{ 
    return "You have sent me " + iParam; 
    // Your result will be JSONised and look like this {d:Json_object} 
    // 

}} 

**使用阿賈克斯帖子** 假設您的WebMethod設置如上。你的Ajax調用看起來就像這樣：

"ajax": { 
      "type": "POST", 
      "contentType": "application/json", 
      "dataFilter": function (data) { 
       // as web methods return {d:object} this method gets rid of the extra d container in your result set. 
       var msg = eval('(' + data + ')'); 
       if (msg.hasOwnProperty('d')) 
        return msg.d; 
       else 
        return msg; 
      }, 
      "dataType": "json", 
      "url": "your_page.aspx/FN_TEST", // your web methode 

      "data": function (d) { 
       // add your params here, 
       return JSON.stringify({ iParam: $("#your_field").val()}); 
      }, 
      "success": function (data) { 
       // do something with your result 

      }, 


     }, 

，如果你想定製更多，你可以JSONise所有表單字段，發送字符串，解析字符串返回到JSON在您的WebMethod和流程繼續你的東西。

編輯 上面的代碼是不完整的代碼，修改根據自己的需要 哦順便說一句..如果您使用的是回傳，你可以Request.Form集合中檢索您的formfields。我假設您對此不感興趣