如何使用相同的名称元素制作Ajax表单帖子

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

本文关键字:Ajax 表单 元素 何使用      更新时间:2023-09-26

所以我的表单的一部分具有相同的"名称"值,该值将存储为数组。

我正在尝试做的是将值发送到 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:

在发布"pref_subject"的值之前,我将在请求表中发布其他值,以便发布到"last_id"。

获得最后一个 id 后,我将"pref_subjects"发布到第二个表中。

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

您可以将相同的输入名称值发送到 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 成功时调用回调函数

错误:当 AJAX 开机自检失败时调用回调函数

要处理 JSON 数据,请设置 dataType="json"