JQuery Ajax WebService传递参数的简单实例

请稍等一下，我给您详细讲解一下。

JQuery Ajax WebService传递参数的简单实例

1、什么是JQuery Ajax WebService

JQuery Ajax WebService是一种用于前端开发的技术，通过它可以使得前端JavaScript可以与后端Web服务进行数据交互，从而实现基于Web端的异步操作。

2、传递参数的简单实例

下面给出一个简单的例子，该例中通过JQuery Ajax WebService进行跨域请求，向Web服务发送两个参数，Web服务会将这两个参数当做加数进行加法运算，最后将运算结果返回给前端页面。

在Web服务端，我们需要编写一个.asmx文件，并实现其中的Web服务方法。下面是一个示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebApplication1
{
    /// <summary>
    /// WebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
    // [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public int Add(int num1, int num2)
        {
            return num1 + num2;
        }
    }
}

在前端页面，我们需要使用JQuery的ajax方法发送请求，并将参数封装到data中。下面是一个示例：

function CallService() {
    $.ajax({
        type: "POST",
        url: "http://localhost:5000/WebService.asmx/Add",
        data: JSON.stringify({ 'num1': 1, 'num2': 2 }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}

在上述代码中，我们通过JSON.stringify方法将需要传递的参数num1和num2封装到了data中，content-type设为application/json，dataType设为json，这就允许我们向Web服务发送跨域请求，并成功接收到了Web服务返回的结果。

另外，如果需要向Web服务发送同步请求，则需要将async设置为false。如果需要在Web服务返回结果后执行回调函数，则需要将success回调函数定义在ajax方法中，如果请求出错需要执行回调函数，则需要将error回调函数定义在ajax方法中。

3、第二个示例

下面给出另一个例子，该例中我们仍然通过JQuery Ajax WebService进行跨域请求，不过这一次我们向Web服务发送三个参数，并要求Web服务返回一组数据。

在Web服务端，我们需要编写一个.asmx文件，并实现其中的Web服务方法。下面是一个示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace WebApplication1
{
    /// <summary>
    /// Summary description for WebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
    // [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public List<string> GetUserInfo(string name, string age, string gender)
        {
            string connectionString = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
            SqlConnection conn = new SqlConnection(connectionString);
            conn.Open();
            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.Connection = conn;
            sqlCmd.CommandType = CommandType.Text;
            sqlCmd.CommandText = "select * from UserInfo where Name=@Name and Age=@Age and Gender=@Gender";
            sqlCmd.Parameters.AddWithValue("@Name", name);
            sqlCmd.Parameters.AddWithValue("@Age", age);
            sqlCmd.Parameters.AddWithValue("@Gender", gender);
            SqlDataReader reader = sqlCmd.ExecuteReader();
            List<string> results = new List<string>();
            while (reader.Read())
            {
                results.Add(reader["Name"].ToString());
                results.Add(reader["Age"].ToString());
                results.Add(reader["Gender"].ToString());
            }
            reader.Close();
            conn.Close();
            return results;
        }
    }
}

在前端页面，我们需要使用JQuery的ajax方法发送请求，并将参数封装到data中。下面是一个示例：

function CallService() {
    $.ajax({
        type: "POST",
        url: "http://localhost:5000/WebService.asmx/GetUserInfo",
        data: JSON.stringify({ 'name': '张三', 'age': '20', 'gender': '男' }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.responseText);
        }
    });
}

在上述代码中，我们通过JSON.stringify方法将需要传递的参数name、age和gender封装到了data中，content-type设为application/json，dataType设为json，这就允许我们向Web服务发送跨域请求，并成功接收到了Web服务返回的结果。

另外，由于GetUserInfo方法返回的是一个List类型的集合，在前端页面接收到数据后，我们可以使用for循环对其进行遍历操作，然后将结果输出到页面上。