Question

我想将数组中的数据插入到sql语法所在的submit（）函数中的数据库表中。我想插入数据，然后在成功后重定向到另一个页面。我不知道如何用ajax做到这一点。

我试图制作ajax语法，但我不知道我是否正确传递了与数组中自己的值对应的obj.name和obj.books的数据。

例如： [{ “名称”： “BOOK1”， “书”：[ “thisBook1.1”， “thisBook1.2”]}，{ “名称”： “第二册”， “书”：[ “thisBook2.1”，” thisBook2.2" ， “thisBook2.3”]}]

function submit(){
    var arr = [];
    for(i = 1; i <= authors; i++){
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function(){
            var data = $(this).val();
            obj.books.push(data);
        });
        //sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //mysqli_query(sql);
        arr.push(obj);
    }

    $("#result").html(JSON.stringify(arr));
}
/////////////////////////////////
//I tried this:
$.ajax({
   type: "POST",
   data: {arr: arr},
   url: "next.php",
   success: function(){

   }
});
/////////////////////////////////

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type="text/css">
    <!-- #main {
      max-width: 800px;
      margin: 0 auto;
    }
    -->
  </style>
</head>

<body>
  <div id="main">
    <h1>Add or Remove text boxes with jQuery</h1>
    <div class="my-form">
      <form action"next.php" method="post">
          <button onclick="addAuthor()">Add Author</button>
          <br>
          <br>
          <div id="addAuth"></div>
          <br>
          <br>
          <button onclick="submit()">Submit</button>
      </form>
    </div>

    <div id="result"></div>
  </div>

  <script type="text/javascript">
    var authors = 0;

    function addAuthor() {
      authors++;
      var str = '<br/>' + '<div id="auth' + authors + '">' + '<input type="text" name="author" id="author' + authors + '" placeholder="Author Name:"/>' + '<br/>' + '<button onclick="addMore(\'auth' + authors + '\')" >Add Book</button>' + '</div>';
      $("#addAuth").append(str);
    }

    var count = 0;

    function addMore(id) {
      count++;
      var str = '<div id="bookDiv' + count + '">' + '<input class="' + id + '" type="text" name="book' + id + '" placeholder="Book Name"/>' + '<span onclick="removeDiv(\'bookDiv' + count + '\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">Remove</span>' + '</div>';
      $("#" + id).append(str);
    }

    function removeDiv(id) {
      //var val = confirm("Are you sure ..?");
      //if(val){
      $("#" + id).slideUp(function() {
        $("#" + id).remove();
      });
      //}
    }

    function submit() {
      var arr = [];
      for (i = 1; i <= authors; i++) {
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function() {
          var data = $(this).val();
          obj.books.push(data);
        });
        //                            sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //                            mysqli_query(sql);
        arr.push(obj);
      }

      $("#result").html(JSON.stringify(arr));
    }
  </script>
</body>

</html>

Answer 1

在将数组发送到服务器之前将数组发送到服务器，stringify数组，因此在服务器中，您可以解码json并恢复数组，然后将接收的数据插入数据库
JS

function submit(){
    var arr = [];
    for(i = 1; i <= authors; i++){
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function(){
            var data = $(this).val();
            obj.books.push(data);
        });

        //sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //mysqli_query(sql);
        arr.push(obj);
    }
    sendToServer(arr)
    $("#result").html(JSON.stringify(arr));
}
function sendToServer(data) {
   $.ajax({
      type: "POST",
      data: {arr: JSON.stringify(data)},
      url: "next.php",
      success: function(){

      }
   });
}

PHP（next.php）

$data = json_decode(stripslashes($_POST['arr']));
foreach($data as $item){
   echo $d;
   // insert to db
}

Answer 2

请记住以下内容

Javascript / JQuery是客户端，因此无法访问服务器上的数据库。

您可以通过AJAX将数据发送到next.php，然后使用此数据插入数据库。

要改进调试，请使用以下代码确保在next.php中传递正确的数据

   var_dump($_POST);

您的SQL语句必须使用$ _POST传递的数据在next.php中执行（因为您的“类型”的AJAX请求已发布）。

如何使用AJAX将对象数据数组插入数据库

2 个答案: