$ .ajax呼叫无法正常工作

时间:2013-09-12 07:10:47

标签: javascript jquery

在IE9下面的代码显示JScript不支持$ .ajax()方法,在FF中它没有显示任何恐怖但它应该做的任务没有完成。我附加我的aspx代码和代码隐藏方法也我已经在代码隐藏中包含了所有必需的库。

<table class="style3">
    <tr>
        <td><label id="lname" >Name</td>
        <td><input id="name" type="text" runat="server"/></td>
    </tr>
    <tr>
        <td><label id="ldept">Department</label></td>
        <td><select id="dept">
        <option value="TnH">Travel & Hospitality</option>
        <option value="BFS">Banking & Financial Services</option>
        <option value="Insurance">Insurance</option>
        <option value="Communication">Communication</option>
        <option value="HealthCare">HealthCare</option>
        </select> 
    </td>
    </tr>
    <tr>
        <td><label id="lcontact">Contact</label></td>
        <td><input id="contact" type="text" runat="server"/></td>
    </tr>
    <tr>
        <td><label id="lage">Age</label></td>
        <td><input id="age" type="text" runat="server"/></td>
    </tr>
</table>
</div>
<asp:Button ID="hdnBtn" runat="server" onclick="AddEmployee" />
<asp:HiddenField ID="hname" runat="server" />
<asp:HiddenField ID="hdept" runat="server" />
<asp:HiddenField ID="hcontact" runat="server" />
<asp:HiddenField ID="hage" runat="server" />
</form>
<script type="text/javascript">



 $(document).ready(function()
    {
        $("#dialog-form").parent().appendTo($("form:first"));
        var hdnBtn=document.getElementById("<%=hdnBtn.ClientID %>");
        $("#hdnBtn").hide();
        $("#diaglog-form").hide();   
        $("#addBtn").click(function()
        {
        $("#diaglog-form").show();   
            $("#diaglog-form").dialog(
            {
                open:function()
                {
                    $("#this").parent().appendTo($("form:first"));
                },
                title: 'Add New Employee',
                modal:true,
                minHeight:300,
                minWidth:440,

                buttons:
                {
                    Add:function()
                    {   

//                        $("#hname").val($("#name").val());
//                        $("#hdept").val($("#dept").val());
//                        $("#hcontact").val($("#contact").val());
//                        $("#hage").val($("#age").val());
//                        $("#hdnBtn").click();
                        var name=name.val();
                        var dept=dept.val();
                        var contact=contact.val();
                        var age=age.val();
                        $.ajax({
                        type: "POST",
                        url: "Default.aspx/GetData",
  //                      data: "{name: '" + name.val() + "',dept:"+dept.val()+"',contact:"+contact.val()+"',age:"+age.val()+"'}",
                        data: {name:name,dept:dept,contact:contact,age:age},
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: true,
                        processData:false,
                        success : function(data) 
                        { 
                        // in case you would use a return value in your webmethod
                        $("#btnAllEmp").click();
                        $(this).dialog("close");
                        }
                        });


                    },
                   close:function()
                   {
                        $(this).dialog("close");
                   }
                }
            }
            );
        });
    });
    </script>

我附上的图书馆: -

<script src="JQuery/jquery-1.9.0.min.js" type="text/javascript" />
     <script src="JQuery/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="JQuery/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.core.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.button.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.position.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.resizable.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.button.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.dialog.js" type="text/javascript"></script>
    <script src="JQuery/jquery.ui.effect.js" type="text/javascript"></script>

    <link href="Stylesheets/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
    <link href="Stylesheets/jquery.ui.all.css" rel="stylesheet" type="text/css" />
     <link href="Stylesheets/jquery-ui.css" rel="stylesheet" type="text/css" />

代码隐藏方法: -

[WebMethod]
        public static void GetData(string jsonData)
        {
            //string name = collection["name"] as string;
            //string dept = collection["dept"] as string; ;
            //string contact = collection["contact"] as string; ;
            //string age = collection["age"] as string; ;

            EmployeeEntity emp = new EmployeeEntity();
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            emp = serializer.Deserialize<EmployeeEntity>(jsonData);

            string name = emp.EmpName;
            string dept = emp.EmpDept;
            string contact = emp.EmpContact;
            string age = emp.EmpAge;
            string text = name + " " + dept + " " + contact + " " + age + " ";
            System.IO.File.WriteAllText(@"D:\WriteText.txt", text);

            SqlConnection connection = new SqlConnection(conString);
            String cmdText = "INSERT INTO EMPLOYEE VALUES('" + name + "','" + dept + "','" + contact + "','" + age + "')";
            SqlCommand command = new SqlCommand(cmdText, connection);
            command.Connection.Open();
            command.ExecuteNonQuery();

        }

[编辑]

var name=$("#name").val();
                        var dept=$("#dept").val();
                        var contact=$("#contact").val();
                        var age=$("#age").val();
                        var data=JSON.stringify({name:name,dept:dept,contact:contact,age:age});
                        $.ajax({
                        type: "POST",
                        url: "Default.aspx/GetData",
  //                      data: "{name: '" + name.val() + "',dept:"+dept.val()+"',contact:"+contact.val()+"',age:"+age.val()+"'}",
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: true,
                        processData:false,
                        success : function(data) 
                        { 
                        // in case you would use a return value in your webmethod
                        $("#btnAllEmp").click();
                        $(this).dialog("close");
                        }
                        });

在使用JQuery 1.10.2后,$ .ajax()被识别出来了。谢谢 但GetData()没有做任何事情,Data没有插入数据库。请帮助

[编辑1]

error:function(resp,textStatus,errorThrown)
                        {
                            alert("Error : "+errorThrown);
                        }
                        });

它给出了“错误:内部服务器错误”。请现在帮助我

3 个答案:

答案 0 :(得分:0)

尝试更改您的参数

JSON.stringify({name:name,dept:dept,contact:contact,age:age}),

以及这些

中的值
 var name=name.val();
 var dept=dept.val();
 var contact=contact.val();
 var age=age.val();

答案 1 :(得分:0)

这是因为ajax调用的参数与web方法的参数不匹配。在客户端你这个:

...data: {name:name,dept:dept,contact:contact,age:age},..

在你的网络方法中你有这个:

public static void GetData(string jsonData)

如果没有任何其他问题,解决方案是使它们匹配;在服务器上,您可以将方法的签名更改为:

public static void GetData(string name, string dept, string contact, string age)

这样,您可以删除您在服务器端执行的所有反序列化,并直接访问您的参数。

请注意,您编写的Web方法似乎容易受到SQL注入攻击!您正在传递参数以便立即在数据库上执行写入SQL。

答案 2 :(得分:0)

请尝试更改JSON的格式为

 var jsonData =   [{"name":"kiteplayer","dept":"XXX"}{" name":"user","dept":"YYY"}]

也可以尝试使用

 data : JSON.stringify(jsonData )

还尝试添加JSON-2.js以支持IE。我用过这个。希望这有帮助。