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


252

我应该如何在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票赞成(我很遗憾没有首先找到它):

使用jquery进行POST,如何正确提供“数据”参数?

这完美地回答了我的问题,我发现以这种方式进行操作更容易阅读,而且不需要encodeURIComponent()在URL或DATA值中手动使用(这是我在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的快捷方式
DenysSéguret13年

除了,您的Edit 09/04/2013是一个发帖请求:-),但它的工作方式显然与GET相同。
commonpike

Answers:


307

使用ajax的data选项。您可以通过dataajax中的选项将数据对象发送到服务器,并且type定义了如何发送数据对象(POSTGET)。默认类型为GETmethod

试试这个

$.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(); 

2
你不需要encodeURIComponent。jQuery将为您做到这一点。

2
@KlwWallace没有。那是PHP(服务器端),取决于您使用的服务器语言。在PHP中,这就是我们获取get请求的值的方式。

1
@bipen。收到。我删除了我的评论,以免混淆任何人。谢谢。
柯比·华莱士

您需要使用jQuery.param()函数将对象转换为GET参数,因此使用jQuery时应使用data:$.param({ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress}),而不是data: { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress }
Power Engineering

22

将参数放入通话的data一部分ajax。请参阅文档。像这样:

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

10

这是使用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()或链接一个.fail对你$.get像下面

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

将数据类型设置为'jsonp'的原因是由于浏览器存在相同的原始政策问题,但是如果您是在托管JavaScript的同一域上发出请求,则数据类型应设置为json

如果你不想使用jQuery的$.get,然后看到文档$.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有问题,stackoverflow.com/questions/41192531/…。我对这个问题进行了进一步的改进,现在我在其中调用一个jquery对话框并调用ajax从mysql检索数据。我缺少有关如何检索与每个数据点单击关联的唯一ID的链接。谢谢您能帮我的忙。谢谢
user5249203 '16

1

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
    }
});

1
你为什么要这么做stringify?jQuery的ajax实现为您解决了这一问题。
史蒂夫·

1

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

您应该processData设置为true

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

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


-1

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'];
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.