如何使用动态复选框 ul 列表格式化 Ajax"数据"字符串

Question

我是jquery的新手，更具体地说是ajax。

我创建了一个表单，包括文本字段以及从MySQL表中提取的动态下拉列表。我使用一个PHP脚本来检查空字段，并且在表单中至少选中一个复选框，如果满足这些条件，则返回true。我已经测试了meeting_new_validation.php，我想返回的值运行良好，但我的ajax没有有效地与它对话。我几乎肯定"data"字符串中存在错误。我不知道如何在包含动态下拉ul列表的情况下格式化data字符串。这是我所拥有的：

形式

<form id="new_meeting_form" action="meeting_new_validation.php" method="POST">
  Meeting Name:
  <input type="text" id="meeting_topic" name="meeting_topic" placeholder="ex: ARIA Budget" class="input"/>
  <?php
  require_once('php/config.php');
  $query = "SELECT * FROM tapp_contact_list";
  $result = mysqli_query($con, $query) or die("Query error: " . mysqli_error($con));
  ?>
  <div id="dd" class="wrapper-dropdown"><small id="counter"></small>
    <ul class="dropdown">
      <?php
      $i=1;
      while ($row = mysqli_fetch_array($result)){     
        echo '<li><input type="checkbox" id="element-'.$i.'" name="checked[]" value='.$row['Names'].'><label for="element-'.$i.'">'.$i.'. '.$row['Names'].'</label> </li>';
        $i++;
      }?>
    </ul>
  </div>
  Meeting Location:
  <input type="text" id="meeting_location" name="meeting_location" class="input"/>
  Meeting Agenda:
 <input type="text" id="meeting_agenda" name="meeting_agenda" class="input"/>
 <input type="button" name="start" class="new_meeting_validation" onclick="new_meeting_validation()" value="START" />
 <div id="add_err"><br></div>
</form>

php脚本检查空字段：meeting_new_validation.php

<?php
$topic = $_POST['meeting_topic'];
$checked = $_POST['checked'];
$location = $_POST['meeting_location'];
$agenda = $_POST['meeting_agenda'];
if($topic == ""){
  echo '*Please enter a meeting name';
}
elseif($checked == ""){
  echo '*Please select people at the meeting';
}
elseif($location == ""){
  echo '*Please enter a meeting location';
}
elseif($agenda == ""){
  echo '*Please enter a meeting agenda';
}
else{
  echo 'true';
}
?>

JQUERY:

function new_meeting_validation(){
  var meetingTopic=$('#meeting_topic').val();
  var meetingLocation=$('#meeting_location').val();
  var checkbox=$("#checked").val();
  var meetingAgenda=$('#meeting_agenda').val();
  var dataString = 'meeting_topic='+meetingTopic+'checked='+checkbox+'meeting_location='+meetingLocation+'meeting_agenda='+meetingAgenda;
  $.ajax({
    type: "POST", 
    url: "meeting_new_validation.php",
    data: dataString,
    cache: false,
    success: function(result){
  var result=trim(result);
  if(result=='true'){
        $("#meeting_new_b").fadeOut('slow');
        window.location='meeting_page.php'; 
      }
      else{
        $("#add_err").fadeIn('normal').html(result);
      }
    }
  }); //end ajax
  return false;
} //end new_meeting_validation
function trim(str){
  var str=str.replace(/^s+|s+$/,'');
  return str;
}

我相信这只是格式错误？非常感谢您的帮助，提前感谢！

Answer 1

您可以使用jQuery内置的serialize函数：

function new_meeting_validation(){
  $.ajax({
    type: "POST", 
    url: "meeting_new_validation.php",
    data: $('#new_meeting_form').serialize(),
    cache: false,
    success: function(result){
    ...

这将为您提供完整的表单，无论何时添加了什么字段。

在服务器端，您需要使用isset来检查选中了哪些复选框，因为未选中的复选框不会发送到服务器。

Answer 2

我不确定jquery是如何转换的，但现在你的数据字符串看起来是这样的：

"meeting_topic=meetingTopicValuechecked=checkboxValuemeeting_location=meeting_LocationValuemeetinG_agenda=meetintAgendaValue"

据我所见，值和下一个名称之间没有分隔符？这是jquery的正确格式吗？