Question

我正在尝试使用ajax调用asp.net webservice提交一个简单的表单，但我在表单提交时收到'错误'警告。有人可以告诉我下面的代码有什么问题。

HTML：

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
      <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   </div><!-- /header -->

    <div data-role="content">  
  <form id="form1" data-ajax="false" method="post">
    <div id="AreaNoDiv" data-role="fieldcontain" class="field">
        <label for="Facility">Facility*</label>     
        <input id="Facility" name="shipNo_r" type="text" required/>
    </div>

     <div id="desDiv" data-role="fieldcontain" class="field">

        <label for="des" id="Label1" name="fnameLabel">Description*</label>     
        <input id="des" name="fname_r" type="text" required/>

    </div>
     <div id="submitDiv" data-role="fieldcontain" style="width: 30%">    
     <input type="submit" value="Add Facility" data-inline="true" id="submit"/>
    </div>

    </form>

    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>

表格提交脚本：

$("#form1").submit(function () {
    var serviceURL = 'service1.asmx/SubmitList';
    var name = "chamara";
    $.ajax({
        type: "POST",
        url: serviceURL,
        data: '{"name":"' + name + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {

        // parse it as object
        var outStr = JSON.parse(data.d);
        alert(outStr);
    }

    function errorFunc() {
        alert('error');
    }
});

网络服务：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]

  public class Service1 : System.Web.Services.WebService {

    [WebMethod]
    public string SubmitList(string name)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        string str = "Your Name is"+name;
        string jsonString = serializer.Serialize(str);
        return jsonString;
    }

}

更新表单提交后的导航页面

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <script type="text/javascript">
     $('#arealistpage').live('pageshow', function (event) {
         $('div[id="primaryList"] ul[data-role="listview"] a').bind("click", function () {
             var facilityid = $(this).data("facilityid");
             sessionStorage.facilityid = facilityid;
            });
     });
</script>

</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
        <h1><a name="top"></a>Facility</h1>
       <a href="../MenuePages/Dictionaries.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   <a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;"  rel="external" data-transition="slide" data-ajax="false">Add</a>
    </div><!-- /header -->

    <div data-role="content">  
     <div id="primaryList">
    <ul data-role="listview" data-inset="true" data-theme="c"  data-filter="true" id="areaList" data-split-icon="gear" data-split-theme="d">

    </ul>

        </div>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
   <script src="FacilityScript.js" type="text/javascript"></script>

</div><!-- /page -->
  <div data-role="page" id="dialog">
  <div data-role="header" data-theme="b">
    <h1>Options</h1>
  </div>   
 <ul data-role="listview" data-inset="false"
                data-theme="c">
               <li data-icon="false"><a href="UpdateFacility.aspx"  data-ajax="false">Edit</a></li>

              <li data-icon="false"><a href="#divMsg" data-rel="dialog" data-transition="pop">Delete</a></li>

            </ul>   
</div> 
<div data-role="page" id="divMsg">
  <div data-role="header" data-theme="b">
    <h1>Confirmation</h1>
  </div>   

  <div data-role="content">  
  <a href="Facility.aspx" onclick="DeleteFacility(); return true" data-role="button"  data-ajax="false">Delete Record?</a>
  </div>
   <script src="FacilityScript.js" type="text/javascript"></script>
</div>
</body>
</html>

Answer 1

您的代码是正确的，所以我猜在ajax调用期间会出现问题。

首先看一下我的另一个答案，我做了一个jQuery Mobile ajax表单子目录的工作示例：https://stackoverflow.com/a/15205612/1848600。我的例子使用PHP，但逻辑是相同的。

我的电话如下：

$.ajax({url: 'check.php',
    data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
        type: 'post',                   
    async: true,
    beforeSend: function() {
        // This callback function will trigger before data is sent
        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
    },
    complete: function() {
        // This callback function will trigger on data sent/received complete
        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
    },
    success: function (result) {
            resultObject.formSubmitionResult = result;
                        $.mobile.changePage("#second");
    },
    error: function (request,error) {
        // This callback function will trigger on unsuccessful action                
        alert('Network error has occurred please try again!');
    }
});

使用Firebug进行调试：

下一步应该是错误调试。

如果您使用的是Firefox或Chrome，请安装一个名为Firebug的插件。

这是一个链接：https://addons.mozilla.org/en-US/firefox/addon/firebug/
安装firebug，Firefox版本比Chrome版更好。
打开您的页面和Firebug插件。
在一个firebug窗口中，顶部有一个标签栏，以Console，HTML，CSS开头..最多为Cookies。单击“网络”选项卡。新标签栏将在主标签栏下方打开。现在单击XHR选项卡并单击清除按钮（相同的标签栏，清除按钮位于左侧）。
点击提交表单。在firebug窗口内，新的日志行应该显示为“POST ...”或“GET ......”。点击它。
将显示新内容。在新的标签栏中，有一个请求（或发布或获取）选项卡。这是你的要求。如果ajax调用已到达其目标，则另一个选项卡应存在名称Response。
打开响应并查看。应该有像JSON这样的错误或真实的响应：{“message”：“0”，“draftSaved”：true，“disableEditor”：false}。如果您的响应具有正确的JSON输出而不是ajax调用是成功的。

使用FIDLER进行调试：

你甚至可以使用名为FIDLER的工具：http://www.fiddler2.com/fiddler2/，它是一个更好的工具，但它需要更多的时间来习惯。

Fiddler是一个Web调试代理，它记录所有HTTP（S）流量在您的计算机和Internet之间。 Fiddler允许你检查所有HTTP（S）流量，设置断点，以及传入或者“小提琴” 传出数据。 Fiddler包含强大的基于事件的脚本子系统，可以使用任何.NET语言进行扩展。

以下是Fiddler用法的视频教程：http://www.youtube.com/watch?v=YkJ_Wsd-rtM

Answer 2

我将html更改为

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
      <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   </div><!-- /header -->

    <div data-role="content">  
  <form id="form1" method="post">
    <div id="AreaNoDiv" data-role="fieldcontain" class="field">
        <label for="Facility">Facility*</label>     
        <input id="Facility" name="shipNo_r" type="text" required/>
    </div>

     <div id="desDiv" data-role="fieldcontain" class="field">

        <label for="des" id="Label1" name="fnameLabel">Description*</label>     
        <input id="des" name="fname_r" type="text" required/>

    </div>
     <div id="submitDiv" data-role="fieldcontain" style="width: 30%">    
     <button class="btnLogin" data-theme="b" type="submit" id='mysubmit'>submit</button>
    </div>

    </form>

    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>

和你的js如下

$('#arealistpage').live('pageshow',function(event){
var serviceURL = 'service1.asmx/SubmitList';
    $('#mysubmit').bind('click', function(e){
        var name = "chamara";
        e.preventDefault();
            $.ajax({
            type: "POST",
            url: serviceURL,
            data: '{"name":"' + name + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
    });

    function successFunc(data, status) {

        // parse it as object
        var outStr = JSON.parse(data.d);
        alert(outStr);
    }

    function errorFunc() {
        alert('error');
    }
});

它运作得很好。

顺便说一句，为什么要在服务中序列化字符串。当你想将C＃对象转换为JSON字符串时，Serialise会很有用。希望它会帮助你。

Answer 3

单纯使用标准按钮进行表单提交，为其编写单击函数，然后在完成验证后调用表单提交是否存在问题？像这样简单的我有一个名为“查询”的按钮

  $("#inquire").click(function () {
    if (validates()) {
        $("form").submit();
    } else showValidationErrors();

});

简单表单在Jquery Mobile中提交

3 个答案:

使用Firebug进行调试：

使用FIDLER进行调试：