如何使用 jQuery 在 GET 请求中传递参数

Posted 2023-02-16

【中文标题】如何使用 jQuery 在 GET 请求中传递参数

【英文标题】：How to pass parameters in GET requests with jQuery

【发布时间】：2013-03-12 16:13:23

【问题描述】：

我应该如何在 jQuery Ajax 请求中传递查询字符串值？我目前按如下方式进行操作，但我确信有一种更简洁的方式不需要我手动编码。

$.ajax(
    url: "ajax.aspx?ajaxid=4&UserID=" + UserID + "&EmailAddress=" + encodeURIComponent(EmailAddress),
    success: function(response) 
        //Do Something
    ,
    error: function(xhr) 
        //Do Something to handle error
    
);

我看到了查询字符串参数作为数组传递的示例，但我看到的这些示例不使用$.ajax() 模型，而是直接使用$.get()。例如：

$.get("ajax.aspx",  UserID: UserID , EmailAddress: EmailAddress  );

我更喜欢使用 $.ajax() 格式，因为这是我习惯的（没有特别好的理由 - 只是个人喜好）。

编辑 09/04/2013：

在我的问题结束后（因为“过于本地化”），我发现了一个相关的（相同的）问题 - 有 3 个赞（我一开始没有找到它是我的坏事）：

Using jquery to make a POST, how to properly supply 'data' parameter?

这完美地回答了我的问题，我发现这样做更容易阅读并且我不需要在 URL 或 DATA 值中手动使用encodeURIComponent()（这是我在 bipen 的答案中发现的不清楚）。这是因为data 值是通过$.param() 自动编码的）。以防万一这对其他人有用，这是我使用的示例：

$.ajax(
    url: "ajax.aspx?ajaxid=4",
    data:  
        "VarA": VarA, 
        "VarB": VarB, 
        "VarC": VarC
    ,
    cache: false,
    type: "POST",
    success: function(response) 

    ,
    error: function(xhr) 

    
);

【问题讨论】：

$.get 只是 $.ajax 的快捷方式

除了，您的 Edit 09/04/2013 是一个发布请求 :-) 但它显然与 GET 相同。

【参考方案1】：

使用 ajax 的数据选项。您可以通过 ajax 中的data 选项和定义发送方式的type 将数据对象发送到服务器（POST 或GET）。默认类型为GET方法

试试这个

$.ajax(
  url: "ajax.aspx",
  type: "get", //send it through get method
  data:  
    ajaxid: 4, 
    UserID: UserID, 
    EmailAddress: EmailAddress
  ,
  success: function(response) 
    //Do Something
  ,
  error: function(xhr) 
    //Do Something to handle error
  
);

您可以通过（如果您使用 php）获取数据

 $_GET['ajaxid'] //gives 4
 $_GET['UserID'] //gives you the sent userid

在aspx中，我相信是（可能是错的）

 Request.QueryString["ajaxid"].ToString(); 

【讨论】：

你不需要encodeURIComponent。 jquery 会为你做这件事。

@KlwWallace 不。那是 PHP（服务器端）取决于您使用的服务端语言。在 PHP 中，这就是我们获取 get 请求值的方式。

@bipen。收到。我删除了我的评论，以免混淆任何人。谢谢。

你需要使用jQuery.param()函数将对象转换为GET参数，所以使用jQuery你应该使用data:$.param(ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress)，而不是data: ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress

我将如何传递这个特定示例的请求正文？

【参考方案2】：

将您的参数放入ajax 调用的data 部分。见the docs。像这样：

$.ajax(
    url: "/TestPage.aspx",
    data: "first": "Manu","Last":"Sharma",
    success: function(response) 
        //Do Something
    ,
    error: function(xhr) 
        //Do Something to handle error
    
);

【参考方案3】：

这里是使用 jQuery $.get 的语法

$.get(url, data, successCallback, datatype)

所以在你的情况下，这相当于，

var url = 'ajax.asp';
var data =  ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress ;
var datatype = 'jsonp';

function success(response) 
// do something here 


$.get('ajax.aspx', data, success, datatype)

注意 $.get 不会让您有机会设置错误处理程序。但是有几种方法可以使用$.ajaxSetup()、$.ajaxError() 或在$.get 上链接.fail，如下所示

$.get(url, data, success, datatype)
 .fail(function()
)

将数据类型设置为“jsonp”的原因是由于浏览器同源策略问题，但如果您在托管 javascript 的同一域上发出请求，则数据类型设置为 json 应该没问题.

如果您不想使用 jquery $.get，则将 see the docs 用于 $.ajax，这样可以提供更大的灵活性

【参考方案4】：

尝试添加这个：

$.ajax(
    url: "ajax.aspx",
    type:'get',
    data: ajaxid:4, UserID: UserID , EmailAddress: encodeURIComponent(EmailAddress),
    dataType: 'json',
    success: function(response) 
      //Do Something
    ,
    error: function(xhr) 
    //Do Something to handle error
    
);

取决于预期的数据类型，您可以分配html, json, script, xml

【讨论】：

您的解决方案很有帮助，但想知道如何在将变量 (ID) 作为参数传递之前提前定义它？我在 SO 上有 Q，***.com/questions/41192531/…。我在这个 Q 上更进一步，现在我调用一个 jquery 对话框并调用 ajax 从 mysql 检索数据。我缺少有关如何检索与每个 datapoint click 关联的唯一 ID 的链接。感谢您是否可以帮助我。谢谢

【参考方案5】：

data 属性允许您发送字符串。在您的服务器端代码中，将其作为字符串参数名称“myVar”接受，然后您可以将其解析出来。

$.ajax(
    url: "ajax.aspx",
    data: [myVar = id: 4, email: 'emailaddress', myArray: [1, 2, 3]];
    success: function(response) 
    //Do Something
    ,
    error: function(xhr) 
    //Do Something to handle error
    
);

【讨论】：

你为什么要stringify？ jQuery 的 ajax 实现会为您解决这个问题。

【参考方案6】：

在我指定 data 时遇到了同样的问题，但浏览器正在向以 [Object object] 结尾的 URL 发送请求。

您应该将processData 设置为true。

processData: true, // You should comment this out if is false or set to true

【讨论】：

天啊，谢谢。经过 4 小时的搜索和尝试，终于在这里解决了一个问题 :-)

【参考方案7】：

您可以使用$.ajax()，如果您不想将参数直接放入URL，请使用data:。这是附加到 URL 的

来源：http://api.jquery.com/jQuery.ajax/

【参考方案8】：

ajax方法的data参数允许你发送数据到服务器端。在服务器端你可以请求数据。见代码

var id=5;
$.ajax(
    type: "get",
    url: "url of server side script",
    data:id:id,
    success: function(res)
        console.log(res);
    ,
error:function(error)

console.log(error);

);

在服务器端使用 $_GET 变量接收它。

$_GET['id'];