我的ajax电话不会工作?

时间:2015-11-13 11:46:37

标签: javascript php jquery ajax

enter image description here



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




我的ajax电话不会工作任何人都可以帮助我。我试图将我的表单数据发布到我的php脚本,该脚本将运行我的查询。我已经尝试了一些收集数据准备发布的方法,但是当我按提交时没有任何反应。



<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>
&#13;
model.py

class Staff(models.Model):
   name = models.CharField(max_length=30, default='')
   staff_picture = models.ImageField(upload_to = 'staff_images/', default = 'staff_images/no-img.png')


table.py

class ImageColumn(tables.Column):
    def render(self, value):
        return mark_safe('<img src="/media/%s" />' % escape(value))

class Staff(tables.Table):
    doc_pic1 = ImageColumn('staff_picture')
    class Meta:
        model = Staff
        attrs = {"class": "paleblue"}
        fields = ('staff_picture',"Name")
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

附加到表单submit事件,在事件上调用preventDefault以停止正常提交(页面刷新),并使用serialize()从表单生成帖子数据:< / p>

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

在评论中指出编辑时,您需要更改提交按钮以键入submit

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

答案 1 :(得分:0)

试试这个;

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

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

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

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

   });