Jquery+Asp.Net的ajax小测试
想用利用jquery的ajax,所以做了测试,但是老提示parsererror的错误提示,开始一直以为是返回的json格式问题,最后发现是web.config中少了两行东西,郁闷了好长时间,参看了一个网友greki的文章,在这里表示感谢,但是照着没有做出来,自己问了朋友做了测试,最后可以了!
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpHandlers>
下面把测试的几个例子贴了:
测试(vs05)用到一个静态文件,一个jquery1.3.2.js,一个WebServices文件
一静态文件test
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>无标题页</title>
<script language="javascrpt" type="text/javascript" src="/js/jquery1.3.2.js"></script>
<script language="javascript" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" />
<span id="span1"></span>
</form>
</body>
</html>
静态文件中用到得js(分四种情况):
1.不带参数
$(document).ready(function() {
$('#Button1').click(function() {
$.ajax({
type: "POST", //使用get方法访问后台
dataType: "json", //返回json格式的数据
contentType: "application/json",
url: "WebService.asmx/HelloWorld", //要访问的后台地址
data:"{}",
success: function (result) {
alert(result);
},
error: function(xhr,msg,e) { alert(msg); }
});
});
});
2.带参数
$(document).ready(function() {
$('#Button1').click(function() {
$.ajax({
type: "POST", //使用get方法访问后台
dataType: "json", //返回json格式的数据
contentType: "application/json",
url: "WebService.asmx/HelloName", //要访问的后台地址
data:"{name:'lqingtao'}",
success: function (result) {
alert(result);
},
error: function(xhr,msg,e) { alert(msg); }
});
});
});
3.返回泛型列表
$(document).ready(function() {
$('#Button1').click(function() {
$.ajax({
type: "POST", //使用get方法访问后台
dataType: "json", //返回json格式的数据
contentType: "application/json",
url: "WebService.asmx/GetArray", //要访问的后台地址
data:"{i:5}",
success: function (result) {
alert(result.join("-"));
},
error: function(xhr,msg,e) { alert(msg); }
});
});
});
4.返回复杂类型
$(document).ready(function() {
$('#Button1').click(function() {
$.ajax({
type: "POST", //使用get方法访问后台
dataType: "json", //返回json格式的数据
contentType: "application/json",
url: "WebService.asmx/GetPerson", //要访问的后台地址
data:"{name:'lqt',score:80}",
success: function (result) {
var person=result;
var showText=[];
for(var p in person)
{
showText.push(p+":"+person[p]);
}
alert(showText.join("\r\n"));
},
error: function(xhr,msg,e) { alert(msg); }
});
});
});
二.webservice.cs文件
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod]
public string HelloName(string name)
{
return string.Format("Hello,{0}", name);
}
[WebMethod]
public List<int> GetArray(int i)
{
List<int> list = new List<int>();
while (i >= 0)
{
list.Add(i--);
}
return list;
}
[WebMethod]
public Person GetPerson(string name, int score)
{
Person person = new Person();
person.Name = name;
person.Score = score;
return person;
}
public class Person
{
private string _Name;
private int _Score;
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public int Score
{
get { return _Score; }
set { _Score = value; }
}
}
}
