如何在 Jquery UI Dialog 按钮调用上调用 Jquery Ajax 函数答案

【问题标题】：How do call an Jquery Ajax function on Jquery UI Dialog button call如何在 Jquery UI Dialog 按钮调用上调用 Jquery Ajax 函数
【发布时间】：2013-07-09 17:20:08
【问题描述】：

我只想在 Jquery UI 对话框的按钮调用上调用一个 jQuery Ajax“POST”请求，这里是代码 sn-p，

    $("#addqust").dialog({
        autoOpen: false,
        width: 630,
        modal: true,
        resizable: false,
        position: { my: "top", at: "top", of: window },
        buttons: {
            "Save": function (e) {                        
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/InsertQuestion",
                    contentType: "application/json; charset=utf-8",                                                        
                    data: { name: $("#qst").val() },
                    success: function (data) {
                        console.log($("#qst").val());
                        console.log(data.d);
                        // alert("message");
                    }
                    }).done(function (msg) {
                        alert("Data Saved ");
                });
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

但我收到以下错误或 console.log，并且没有调用 Page Web 方法，

POST http://localhost:50583/Default.aspx/InsertQuestion 500 (Internal Server Error) 
send 
v.extend.ajax 
$.dialog.buttons.Save 
(anonymous function) 
v.event.dispatch 
o.handle.u

我想知道我犯了什么错误，感谢您的帮助。

更新 WebMethod，它是一种简单的测试方法，

[WebMethod()]
public static string InsertQuestion(string name)
{
    try
    {           
        string strjson;
        strjson = name;
        return strjson;
    }
    catch (Exception ex)
    {
        throw new System.Exception( ex.Message);
    }
}

使用的 jquery 版本，

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

【问题讨论】：

Default.aspx/InsertQuestion 看起来无效。您是否有尝试调用的 Web 服务或 Web api 控制器？
我在页面方法之前包含了“[WebMethod()]”
@JasonP - 他正在使用 ASP.NET AJAX 页面方法，该方法使用 WebMethod 属性。它实质上是在您的 .aspx 页面中创建一个独立的 Web 服务方法。
请在您的代码隐藏中显示您的InsertQuestion 方法的代码。
啊，好的。在这种情况下，500 通常意味着服务器端出现错误。你试过调试吗？

标签： javascript asp.net jquery-ui jquery

【解决方案1】：

安装 Fiddler 并查看流量。您的帖子有错误，或者至少服务器返回 500。

http://fiddler2.com/

【讨论】：

【解决方案2】：

这里的问题是您的数据对象不是 JSON 字符串。在你的 ajax 调用中试试这个：

buttons: {
        "Save": function (e) {  
            var dataToSend = JSON.stringify({ name: $("#qst").val() });                      

            $.ajax({
                type: "POST",
                url: "Default.aspx/InsertQuestion",
                contentType: "application/json; charset=utf-8",                                                        
                data: dataToSend,
                success: function (data) {
                    console.log($("#qst").val());
                    console.log(data.d);
                    // alert("message");
                }
                }).done(function (msg) {
                    alert("Data Saved ");
            });
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }

为旧版浏览器添加 JSON.js。

【讨论】：