Ajax调用webService（一） 不跨域。
2013-10-31 17:36
573 查看
注：需要的js文件与组件（jquery-1.4.2.min.js和Newtonsoft.Json)
同域：要调用的webservice与ajax请求页面在同一个网站下（本文中都是本地测试）。
数据库（表名 CarUsing cuid 主键自增列 int , carUsing varchar(100) 车辆用途）
一、创建webService。
在框架4.0中找不到Asp.Net Web服务应用程序。将框架更改为4.0以下即可找到。也创建一个网站在网站中添加webService。
View Code
注：在web.config中的<system.web>中添加
二、建立web网站
添加Newtonsoft.Json.dll组件，且添加js文件
在网站根目录下新建一个html页面HTMLPage1.htm。
代码如下：
运行界面如下：
同域：要调用的webservice与ajax请求页面在同一个网站下（本文中都是本地测试）。
数据库（表名 CarUsing cuid 主键自增列 int , carUsing varchar(100) 车辆用途）
一、创建webService。
在框架4.0中找不到Asp.Net Web服务应用程序。将框架更改为4.0以下即可找到。也创建一个网站在网站中添加webService。
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;
namespace WebService2
{
/// <summary>
/// Service1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempri/url")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
[WebMethod(Description = "添加")]
public string AddCarUsing(string cusing)
{
string result = "";
string sql = string.Format("insert into CarUsing values(@carUsing)");
SqlParameter para = new SqlParameter("@carUsing", cusing);
result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, para).ToString();
return result;
}
[WebMethod(Description = "修改")]
public string UpdateCarUsing(int id,string cusing)
{
string result = "";
string sql = string.Format("update CarUsing set carUsing =@carUsing where cuid=@cuid");
SqlParameter[] paras = {
new SqlParameter("@carUsing",cusing),
new SqlParameter("@cuid", id)
};
result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, paras).ToString();
return result;
}
[WebMethod(Description = "删除")]
public string delCarUsing(string cuid)
{
string result = "";
string sql = string.Format("delete from CarUsing where cuid=@cuid");
SqlParameter para = new SqlParameter("@cuid", Convert.ToInt32(cuid));
result = SqlHelper.ExecuteNonQuery(sql, CommandType.Text, para).ToString();
return result;
}
[WebMethod(Description = "根据id查询数据")]
public string getCarUsingBycuid(string cuid)
{
string json = "";
CarUsing caru = new CarUsing();
string sql = "select * from CarUsing where cuid =@cuid";
SqlParameter para = new SqlParameter("@cuid", Convert.ToInt32(cuid));
using (SqlDataReader dr = SqlHelper.ExecuteReader(sql, CommandType.Text, para))
{
while (dr.Read())
{
caru = new CarUsing(
Convert.ToInt32(dr["cuid"]),
dr["carUsing"].ToString()
);
}
json = JsonConvert.SerializeObject(caru);
}
return json;
}
[WebMethod(Description = "查询所有数据")]
public string getCarUsing()
{
string json = "";
List<CarUsing> CarUsings = new List<CarUsing>();
string sql = "select * from CarUsing order by cuid desc";
using (SqlDataReader dr = SqlHelper.ExecuteReader(sql, CommandType.Text))
{
while (dr.Read())
{
CarUsing carUsing = new CarUsing(
Convert.ToInt32(dr["cuid"]),
dr["carUsing"].ToString()
);
CarUsings.Add(carUsing);
}
json = JsonConvert.SerializeObject(CarUsings);
}
return json;
}
}
}View Code
注：在web.config中的<system.web>中添加
<webServices> <protocols> <add name="HttpPost"/> <add name="HttpGet"/> </protocols> </webServices>
二、建立web网站
添加Newtonsoft.Json.dll组件，且添加js文件
在网站根目录下新建一个html页面HTMLPage1.htm。
代码如下：
<html>
<head runat="server">
<title>车用途Ajax+Json</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var WebServiceURL = "http://localhost:22657/";
//js版本必须2.0以下，2.0以上不ie8不支持get等方法。
function showAll() {
//返回Dafault页面的数据。
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: WebServiceURL + "Service1.asmx/getCarUsing", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{}", //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success: function (json) {
//回调函数，result，返回值
var jsons = eval('(' + json.d + ')');
var html = "<table border=1 bordercolor=6d6d6d cellspacing = 1>";
html += "<tr backgroundcolor='yellow'><td>Id</td><td>用途</td><td>操作</td></tr>";
for (var i = 0; i < jsons.length; i++) {
html += "<tr>";
html += "<td>" + jsons[i].Cuid + "</td><td>" + jsons[i].CareUsing + "</td><td><a href='javascript:;' onclick='UpdateInit(" + jsons[i].Cuid + ")'>修改</a> <a href='javascript:;' onclick='if(confirm(\"确定删除嘛?\")){Delete(" + jsons[i].Cuid + ");}'>删除</a></td>";
html += "</tr>";
}
html += "</table>"
$("#div1").html(html);
}
});
}
//准备添加
function Insert() {
$("#d1").show();
$("#d2").show(300);
}
function InsertInfo() {
var json = '{"cusing":"' + form1.txtcarUsing.value + '"}';
$.ajax({
type: "POST",
contentType: "application/json",
url: WebServiceURL + "Service1.asmx/AddCarUsing",
data: json,
dataType: 'json',
success: function (result) {
showAll();
CloseDiv();
},
error: function (result) {
alert("操作失败");
}
});
}
function Delete(id) {
var json = '{"cuid":"'+id+'"}';
$.ajax({
url: WebServiceURL + "Service1.asmx/delCarUsing",
contentType: "application/json;charset=utf-8",
type: "POST",
dataType: "json",
data: json,
success: function (json) {
showAll();
},
error: function (json) {
alert("操作失败！");
}
});
}
//修改初始化
function UpdateInit(cuid) {
var json = '{"cuid":"' + cuid + '"}';
Insert(); //弹出修改框。
$.ajax({
type: "POST",
contentType: "application/json",
url: WebServiceURL + "Service1.asmx/getCarUsingBycuid",
data: json,
dataType: 'json',
success: function (result) {
var json = eval('[' + result.d + ']');
form1.txtcarUsing.value = json[0].CareUsing;
form1.txtid.value = json[0].Cuid;
cuid = json[0].Cuid;
},
error: function (json) {
alert("获取数据失败！");
}
});
}
//发送修改
function UpdateSend(id) {
var json = '{"id":' + form1.txtid.value + ',"cusing":"' + form1.txtcarUsing.value + '"}';
$.ajax({
url: WebServiceURL + "Service1.asmx/UpdateCarUsing",
contentType: "application/json;charset=utf-8",
type: "POST",
dataType: "json",
data:json,
success: function (json) {
showAll();
CloseDiv();
},
error: function (msg) {
alert("操作失败！");
}
});
}
function CloseDiv() {
$('#d1').hide(500);
$('#d2').hide(500);
}
</script>
</head>
<body onload="showAll()">
<form id="form1" runat="server">
<input type="button" value="添加车源用途" onclick="Insert()" />
<div id="div1">
</div>
<div id="d1" style="width: 100%; display: none; height: 100%; position: absolute;
left: 0px; top: 0px; filter: alpha(opacity=70);">
</div>
<div id="d2" style="width: 100%; display: none; height: 100%; position: absolute;
left: 0px; top: 0px;">
<table width="100%" height="100%">
<tr>
<td valign="middle" align="center">
<div style="width: 300px; height: 200px; background-color: White; border: 3px red solid;">
<input type="button" value="隐藏" onclick="CloseDiv()" />
<input type="hidden" id="txtid" />
用途：<input type="text" id="txtcarUsing" />
<input type="button" value="添加" onclick="InsertInfo()" />
<input type="button" value="修改" onclick="UpdateSend()" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>运行界面如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax调用cxf webservice接口和跨域
- ajax跨域调用webservice例子
- ajax跨域调用webservice
- Ajax 跨域调用 webservice
- AJAX跨域调用WebService解决方案
- ajax跨域调用webservice的实现代码
- ajax调用WebService 不能跨域
- ajax跨域调用webservice方法实例
- ajax跨域调用webservice
- ajax调用webservice（二） 跨域。
- ajax跨域请求调用webservice接口
- 支持ajax跨域调用的WCF搭建示例
- WebService基础教程之二（Ajax调用WebService服务）
- 自定义WebSerivce作为代理解决SilverLight跨域调用WebService问题
- jsonp 方式的 ajax跨域调用
- ASP.NET AJAX调用本地WebService
- JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
- JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
- Ajax在调用含有SoapHeader的webservice方法
- ajax无法跨域调用接口