javascript - 来自具有相同类的多个 div 的多个值的 AJAX 请求

Question

所以，假设我们有这个结构：

  <div id='allTempLinkHolder'>
    <div class='tempLink'>Value</div>
    <div class='tempLink'>Value 2</div>
    <div class='tempLink'>Value 3</div>
 </div>

我如何使用 post ajax 提交 .tempLink 的所有不同值，例如将它们发布到 fetch.php ？谢谢！

Answer 1

var params;

$(".tempLink").each(function(){
  params=$.extend({}, params,   { "tmplink[]" , $(this).text() }  );
});

$.ajax({
    type: "POST",
    url: "url",
    data: params,
    success: function() {
      //Success code here
    }
});

在 PHP 中，您将在数组中收到它$_POST["tmplink"]

Answer 2

试试这个：

http://jsfiddle.net/htKRf/3/

var links = []

// Put all the tempLinks into an array. 
$.each($('.tempLink'), function (index, element) {
    links.push($(element).text());    
});

// Post it to the url.
$.post('fetch.php', JSON.stringify(links), function() { console.log("SUCCESS"); });

​</p>

Answer 3

如果您只是想发送一个数组：

var values = $.map($('.tempLink'), function(el, idx) {
    return $(el).text()
})

$.post('fetch.php', { values: values}, function(data) {
        /* do something with return data*/
})

Answer 4

var values=[];
$(".tempLink").each(function(){
    values.push($(this).text());
});

$.post({
    url: 'yourPhpScript.php',
    data: {values:values},
    success: function(data) {
        console.log(data);
    }
});

在您的php script使用中

$arr = $_POST['values'];

$value1=$arr[0]; // value
$value2=$arr[1]; // value1
$value2=$arr[2]; // value3

Answer 5

每个 div 单独的 Ajax 调用

 $("div.tempLink").each(function(index, elem) {
    $.ajax({
        url: "my url" + "?param=" + this.text(),
        success: function() {...
        }
    });
});​

或带有值数组的单个调用

var values = new Array();
$("div.tempLink").each(function(index, elem) {
    values.push(this.text());
});

$.ajax({
    type: "POST",
    url: "my url",
    data: JSON.stringify(values),
    contentType: "application/json; charset=utf-8",
    success: function() {...
    }
});​

​</p>

Answer 6

首先，您将使用 jQuery 类选择器将值收集到合适的数据结构中。我不确定你想怎么做，所以我使用了一个 javascript 映射并将原始列表中的位置链接到 text 的值{"link1":"value1","link2":"value2",...}。

var map={};
$(".tempLink").each(function(index) {
    map["tempLink"+index] = $(this).text();
});

要弄清楚 $.ajax 的用法和语法，请参阅jquery ajax api ref。

$.ajax({
    type: "POST",
    url: "fetch.php",
    data: JSON.stringify(map),
    dataType: "...", //The type of data you're expecting the server to respond with
    contentType: "application/json; charset=utf-8",
    success: function(data, status, jqXHR) {},
    error: function(jqXHR, status, error) {}
});​

当您的 ajax 调用返回时，如果成功则触发成功回调，否则触发错误。您可以使用这些来处理您的服务器响应的数据，或者让用户拒绝请求失败。