javascript - 我的ajax通话不起作用？

enter image description here

$("select#pieces").change(function() {
  $('div#pop').html('');
  for (var c=0, t = $("select#pieces").val();c<t;c++) {
    $('div#pop').append("<input type='Text'  name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");
  }
});

我的ajax电话无法正常工作，任何人都可以帮助我。我试图将表单数据发布到将运行查询的php脚本中。我尝试了几种收集准备发布的数据的方法，但是按提交时没有任何反应。

$("#submit").click(function(){

// Tried this previously
//var data = {}; $('form').find('input').forEach(function(input){ data[$(input).attr('name')] = $(input).val(); });

 var $inputs = $('#Form :input');

    var data = {};
    $inputs.each(function() {
        data[this.name] = $(this).val();
    });


      $.ajax({
            type: "POST",
            url: 'checkBeforePrint.php',
            data: { data
            },
            success: function(e) {
                  if (e.r === true) {
                  } else if (e.r === false) {
                  }
            },
            dataType: "json"
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "form" class = "form">
<table>
<tr>
	<td>Reference *</td>
	<td>
  <input type='number' id='a' name='reference_end1' required size='7' maxlength='1'  style='width:90px;font-family:Century Gothic; text-transform:uppercase; '>

  <input type='Text' id='b'  name='reference_end2' required size='7' maxlength='3'  style='width:140px;font-family:Century Gothic; text-transform:uppercase;'>

  <input type='number' id='c'  name='reference_end3' required size='7' maxlength='6'  style='width:190px;font-family:Century Gothic; text-transform:uppercase;'>

  <!-- inputs combined above -->

 <input type='hidden' id='reference_end'  name='reference_end'>
</td>
</tr>

</table>
</div>

</br>
<div class ="bookinform">


<table>
<tr>
	<td>Name of Driver *</td>
	<td>
		<input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'>
	</td>
</tr>
<tr><td></td></tr>
<tr>
	<td>Vehicle Reg *</td>
	<td>
		<input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'>
	</td>
</tr>
<tr><td></td></tr>
<tr><td valign='top'>Haulier *</td><td valign='top'><input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'>

<tr><td></td></tr>
<!--
# Blank out the auto-complete haulier as per Richard Walkers request
onKeyUp="GetResults(document.getElementById('query').value)"
        <div id="results" class="box">
        </div>
-->


</td></tr>


<tr><td>Destination *</td><td><input type='Text' id="query2"  name='destination' required style='width:250px; text-transform:uppercase;'></td></tr>
<tr><td></td></tr>
</table>
</div>
</br>
<div class ="bookinform">
<table>
<tr><td>Pieces *</td>
<td><select id = "pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'>
<option> Select Number Of Pieces </option>
<?php
	$count = 1;
	while ($count<=100) {
		echo "<option value='".$count."'>".$count."</option>";
		$count++;
	};
?>
</select></td></tr>

<!--<tr><td>Labels</td><td>-->
<select name='labels' style="display:none">
<option value='0'>SAME AS PIECES</option>
<?php
	$count = 1;
	while ($count<=100) {
		echo "<option value='".$count."'>".$count."</option>";
		$count++;
	};
?>
</select>

<!--</td></tr>-->


</table>

</br>

<!-- JQUERY POPULATES IN POP pieces fields-->
<div id = "pop"></div>

</div>



<div class ="bookinformbtn">
<div class ="bookinform">


<input id="submit" type="button" value="Submit">
</form>
<!--</br></br>
<button class="resetref" style="width:100%;font-family:Century Gothic; color:#FFC200 ; font-weight: bold;">Next REF</button>-->
</br></br>
<form action="http://cmlgrn:8629/index.php?BookInA">
  <input type='submit' value="EXIT" style='width:100%;font-family:Century Gothic; color:red; font-weight: bold;'>
</form>

最佳答案

附加到表单submit事件，在该事件上调用preventDefault以停止常规提交（页面刷新），然后使用serialize()从表单生成发布数据：

$('#form').submit(function(ev){
    ev.preventDefault();
    $.post('checkBeforePrint.php', $(this).serialize(), function(response){
        console.log(response);
    });
});

如评论中指出的编辑，您将需要更改提交按钮以键入submit

<input id="submit" type="submit" value="Submit">