Question

我正在学习jquery和php。我想使用jQuery的方法$.ajax发送数据。我有一些示例HTML代码。我不想使用标记<form enctype="multipart/form-data" method="post">

<div class="body-post">
    <input name="id" type="text" value=""/>
    <ul>
       <li>
            <input name="title[]" type="text" value=""/>
            <input name="detail[]" type="text" value=""/>
            <input name="link-target[]" type="checkbox" value="0"/>
       </li>
       <li>
            <input name="title[]" type="text" value=""/>
            <input name="detail[]" type="text" value=""/>
            <input name="link-target[]" type="checkbox" value="0"/>
       </li>
    </ul>
</div>

如何进行ajax调用，以便在Div中输入数据。我想发布一个像这样的数据数组：

array
{
   [id] => 1,
   [title] => array
       [
          [0] => title 1,
          [1] => title 2,             
       ],
   [detail]  =>array 
       [
          [0] => detail 1,
          [1] => detail 2, 
       ]
   [link-tagert]  =>array 
       [
          [0] => 0,
          [1] => 1, 
       ]
}

已更新
谢谢 Mark Eriksson 帮助我。我想问更多。当我添加输入类型检查默认值0，如果选中值1。我想如果我取消选中输入结果link-tagert = 0;

Answer 1

取自评论（@Mark Eriksson）

使用$.serialize() jquery api

似乎$ .serialize（）不适用于div。因此，要么添加表单，要么专门选择所有输入。

HTML：

<div id="form" class="body-post">
    <input name="id" type="text" value=""/>
    <ul>
       <li>
            <input name="title[]" type="text" value=""/>
            <input name="detail[]" type="text" value=""/>
       </li>
       <li>
            <input name="title[]" type="text" value=""/>
            <input name="detail[]" type="text" value=""/>
       </li>
    </ul>
</div>

使用Javascript：

$('input').on('blur', function(){
  console.log($('input').serialize())
})

JSFIDDLE

Answer 2

如果您只想发送数据，请将其用于POST发送

// jQuery
$.ajax({
  type: "POST",
  url: <url>,
  data: <data>
});

// or just in JavaScript (without jQuery)
var post = new XMLHttpRequest();
post.open("POST", <url>, true);
post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
post.send(<data>);

这是GET发送

// jQuery
$.ajax({
  type: "GET",
  url: <url>,
  data: <data>
});

// or just in JavaScript (without jQuery)
var get = new XMLHttpRequest();
get.open("GET", <url>, true);
get.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
get.send(<data>);

要食用<data>，你可以使用一些：

// jQuery
{
    "var1": $(".input1").val(),
    "var2": $(".input1").val()
}

// or just in JavaScript (without jQuery)
{
    "var1": document.getElementsByClassName("input1")[0].value,
    "var2": document.getElementsByClassName("input2")[0].value
}

但是，如果你想在你的GET / POST后使用«Response»：

// jQuery
function request(url, next) {
    $.ajax({
        type: 'GET',
        url: url,
        success: function(response) {
          next(null, response);
        },
        error: function() {
          next(new Error("There was a connection error of some sort."));
        }
    });
}
request(<url>, function (err, response) {
    if (err) {
      return err;
    }
    response;
});

// or just in JavaScript (without jQuery)
function request(url, next) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send();
    request.addEventListener("load", function () {
        if (request.status < 200 && request.status >= 400) {
            return next(new Error("We reached our target server, but it returned an error."));
        }
        next(null, request.responseText);
    });
    request.addEventListener("error", function () {
        return next(new Error("There was a connection error of some sort."));
    });
}
request(>url>, function (err, response) {
    if (err) {
      return err;
    }
    response;
});

如何在div jQuery中发布数据输入？

2 个答案: