如何使用相同的 Name 元素创建 Ajax 表单 Post？

Question

所以我的表单的一部分具有相同的 'Name' 值，这些值将存储为数组。

我想做的是将值发送到 AJAX，然后发送到 PHP 以更新我的数据库。

这里的问题是我不确定如何将相同的输入名称值发送到 AJAX 并允许我的 PHP 访问这些值。

代码如下。

编辑：请注意，我正在构建一个 phonegap 应用程序，因此我无法直接将表单发送到我的 php 脚本。

编辑 2：添加了我的 php 脚本，解释了将如何处理信息。

HTML:

<form method="post">

    .
    . Other Input Forms
    .

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject </option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject</option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    Subject: <br>
    <select id="pref_subject[]" name="pref_subject[]">
    <option value="0">Choose a Subject </option>
    <option value="1">English</option>
    <option value="2">A Math</option>
    <option value="3">E Math</option>
    <option value="4">Combined Science</option>
    </select>

    .
    . Other Input Forms
    .

    <button id="submit">Submit</button>
</form>

JQuery/Javascript:

$(document).ready(function(){

  $("#submit").on("click", function(e){
    e.preventDefault();

    $.ajax({
            url: serverURL + "/php/sendRequestProcess.php", 
            type:"POST", 
            data:{
                sd_given_name : $("#sd_given_name").val(),
                sd_family_name : $("#sd_family_name").val(),
                sd_email : $("#sd_email").val(),
                gender : $("#gender").val(),
                pref_edu_level : $("#pref_edu_level").val(),
                pref_subject :  $("#pref_subject[]").val(),
                pref_area : $("#pref_area").val(),
                estate : $("#estate").val(),
                requestPrice : $("#requestPrice").val(),
                lesson_hrs : $("#lesson_hrs").val(),
                lesson_amt : $("#lesson_amt").val()
            }
          })

  });

});

PHP:

在 posting 'pref_subject' 的值之前，我将 posting 请求 table 中的其他值，以便 'last_id' .

得到最后一个id后，我再post把'pref_subjects'变成第二个table。

    $connection = mysqli_connect($servername, $username, $password, $dbname);

  // Check connection
  if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
  }

  $sd_given_name = addslashes($_POST["sd_given_name"]);
  $sd_family_name = addslashes($_POST["sd_family_name"]);
  $sd_email = $_POST["sd_email"];
  $gender = $_POST["gender"];
  $pref_edu_level = $_POST["pref_edu_level"];
  $pref_area = $_POST["pref_area"];
  $estate = $_POST["estate"];
  $requestPrice = $_POST["requestPrice"];
  $lesson_hrs = $_POST["lesson_hrs"];
  $lesson_amt = $_POST["lesson_amt"];

  $request_id;
  $pref_subject = $_POST["pref_subject"];

  $newRequest = "INSERT INTO Request (SD_Given_Name, SD_Family_Name, SD_Email, Gender, 
                               Pref_Edu_Level_ID, Pref_Area_ID, Estate, 
                               Request_Price, Lesson_Hrs, Lesson_Amt) 
          VALUES ('$sd_given_name', '$sd_family_name', '$sd_email', '$gender', 
                   $pref_edu_level, $pref_area, '$estate',
                   $requestPrice, $lesson_hrs, $lesson_amt)";



  if ($connection->query($newRequest) === TRUE) {
    $request_id = $connection->insert_id;
    //echo "New record created successfully. Last inserted ID is: " + $last_id;
  } 

  else {
    echo "Error: " . $newRequest . "<br>" . $connection->error;
  }

  for ($i = 0; $i < count($pref_subject); $i++) {
    if ($pref_subject[$i] > 0) {
      $addSubject = "INSERT INTO Request_Subject (Request_ID, Subject_ID)
      VALUES ($request_id, $pref_subject[$i])";

      $sendSubject = ($connection->query($addSubject));

      if ($sendSubject === FALSE) {
        echo "Error: " . $addSubject . "<br>" . $connection->error;
      }
    }
  }

  $connection->close();

Answer 1

您可以将相同的输入名称值发送到 AJAX

$("#submit").on("click", function(e){

    var form_data = $('#frm_id').serialize();
    $.ajax({
        type: "POST",
        url: serverURL + "/php/sendRequestProcess.php",
        data: form_data,
        dataType: "json",
        success: function(response){
            //data - response from server
        error: function (jqXHR, textStatus, errorThrown)
        {

        }
    });

});

form_data：可以是数组或名值对

成功: AJAX POST成功时调用回调函数

error: AJAX POST失败时调用回调函数

要处理JSON数据，设置dataType=”json”

如何使用相同的 Name 元素创建 Ajax 表单 Post？

How to do a Ajax Form Post with same Name elements?

javascript

php

ajax

jquery

cordova