javascript - 我的ajax调用不起作用？

Question

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>

Answer 1

附加到表单 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">