Jquery Mobile中的简单表单提交

我试图使用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');
    }
});

Web服务:

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>

我把你的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字符串时，serialize会很有帮助。

你的代码是正确的，所以我猜问题发生在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开头。由饼干决定。单击"网络"选项卡。新的标签栏将在主标签栏下方打开。现在单击XHR选项卡并单击清除按钮(相同的选项卡栏，清除按钮在左侧)。
点击提交表单。在firebug窗口中应该出现一个新的日志行，类似于"POST…"或者"GET…"。点击它
将显示新内容。在新的标签栏中有一个请求(或Post或Get)标签。这是你的要求。如果ajax调用已经到达目的地，则应该存在另一个名为Response的选项卡。
打开响应，看一下。应该有错误或真实的响应，如JSON: {"message":"0"，"draftSaved":true，"disableEditor":false}。如果您的响应具有正确的JSON输出，则ajax调用是成功的。

使用FIDLER调试:

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

Fiddler是一个Web调试代理，它记录所有HTTP(S)流量你的电脑和互联网之间。Fiddler允许你检查所有的HTTP(S)流量，设置断点，和"欺骗";与传入或输出数据。Fiddler包括一个强大的基于事件的脚本

这里是提琴使用的视频教程:http://www.youtube.com/watch?v=YkJ_Wsd-rtM

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

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

使用Firebug调试:

使用FIDLER调试:

相关内容

最新更新

热门标签：