【发布时间】：2013-02-21 01:13:56
【问题描述】：
我正在尝试使用对 asp.net 网络服务的 ajax 调用提交一个简单的表单，但我在提交表单时收到“错误”警报。谁能告诉我下面的代码有什么问题。
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>
【问题讨论】：
-
您能否在提交表单时检查服务器日志以确保输入的内容和打印的内容（如果有的话）？
标签： jquery asp.net ajax forms jquery-mobile