首先,需要确保在客户端中引用了 jQuery 库,接着就可以使用 AJAX 技术向服务器端发起请求,调用服务器端的方法。
以下是 JavaScript 用 jQuery 呼叫 Server 端方法实现代码的一般过程:
1.定义一个 jQuery.ajax 函数来发出 HTTP POST / GET 请求:
$.ajax({
type: "POST", // 发送请求的方式
url: "url", // 请求 URL
data: "参数", // 要发送给服务器的数据
contentType: "application/json; charset=utf-8", //请求类型
dataType: "json", // 数据类型
success: function(result) {
// 成功时回调函数
},
error: function(xhr, ajaxOptions, thrownError) {
// 发生错误时的回调函数
}
});
2.在服务器端定义一个 Web Service 或者是一个 WebAPI:
[WebMethod]
public string MyWebServiceMethod(string arg1, int arg2)
{
return "Success";
}
或者
public class MyApiController: ApiController
{
[HttpPost]
public string MyApiMethod(string arg1, int arg2)
{
return "Success";
}
}
3.在 jQuery.ajax 函数的 data 属性中,传递指定的参数数据:
$.ajax({
type: "POST",
url: "MyWebService.asmx/MyWebServiceMethod", // 在 URL 上指定 Web Service 方法名
data: JSON.stringify({ arg1: "abc", arg2: 123 }), // 把参数作为 JSON 字符串发送给服务器端
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
// 打印返回的结果
console.log(result);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
4.在服务器端的 Web Service / WebAPI 中,从请求中提取相应参数:
[WebMethod]
public string MyWebServiceMethod(string arg1, int arg2)
{
// 在此处就可以使用请求中的参数了
return "Success";
}
或者
public class MyApiController : ApiController
{
[HttpPost]
public string MyApiMethod(MyApiRequest request)
{
// 通过正常对象参数来获取请求中的参数值
return "Success";
}
}
public class MyApiRequest
{
public string Arg1 { get; set; }
public int Arg2 { get; set; }
}
5.最后,在 jQuery.ajax 函数的 success 回调函数中处理返回结果:
success: function(result) {
// 处理返回结果
console.log(result.d);
}
以上就是 JavaScript 用 jQuery 呼叫 Server 端方法实现的过程和示例。
下面再提供一个实际应用的示例,以便更好地理解:
客户端代码:
$.ajax({
type: "POST",
url: "/api/Order/Create",
data: JSON.stringify({
customerName: "张三",
orderItems: [
{ name: "商品1", price: 100 },
{ name: "商品2", price: 200 },
{ name: "商品3", price: 300 }
]
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result){
console.log(result);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
服务器端代码:
[HttpPost]
public IHttpActionResult Create(OrderModel model)
{
// 使用 model 中的参数进行一些数据库操作,将订单数据保存到数据库中
return Ok("订单创建成功!");
}
public class OrderModel
{
public string CustomerName { get; set; }
public List<OrderItemModel> OrderItems { get; set; }
}
public class OrderItemModel
{
public string Name { get; set; }
public decimal Price { get; set; }
}
以上示例将客户端中传递的订单数据传递到服务器端进行数据库操作,并将结果返回给客户端。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript用JQuery呼叫Server端方法实现代码与参考语法 - Python技术站