Question

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

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

FORM

<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 = meetingLocationValuemeeting_agenda = meetingAgendaValue”

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

如何使用动态复选框ul列表格式化Ajax'data'字符串

2 个答案: