Question

我正在使用一个ajax事件，当我点击提交按钮将数据添加到数据库时触发该事件，但是当我正式创建此页面时，他们都是用于测试目的的单独文件，所以现在当我放入所有代码时在一起我注意到我用来刷新页面的4个提交按钮然后通过过滤它来改变正在看到的数据正在触发ajax查询我已经把代码放在下面...我很难过去唯一的方法去关于这个...

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function()
    {

$("input[type='checkbox']").on('click', function() {

    var $this = $(this);
    var isChecked = $this.prop('checked');

    var checkVal = isChecked ? $this.attr('id') : $this.attr("value");
    var process= $this.attr("value");
    var userid = $this.attr('name');

            $.ajax({
            type: "GET",
            url: 'request.php',
            data: {
            'uname': checkVal,
            'id': userid

                },
            success: function(data) {

        if(data == 1){//Success 
             alert('Sucess');
          }
        if(data == 0){//Failure 
             alert('Data was NOT saved in db!');
          }
            }
    });
  });

 $('form').bind('submit', function(){  // it is triggering this peice of code when the submit buttons are clicked ???
                $.ajax({
                    type: 'POST',
                    url: "requestadd.php",
                    data: $("form").serialize(),

                    success: function(data) {

                            if(data == 1){//Success 
                                    alert('Sucess');
                                         }
                             if(data == 0){//Failure 
                                    alert('Data was NOT saved in db!');
                                         }
                                 }
                });
                return false;
            });
                      $("#claim").change(function(){       
             $("#area").find(".field").remove();
             //or
               $('#area').remove('.field');
          if( $(this).val()=="Insurance")
             {
        $("#area").append("<input class='field' name='cost' type='text' placeholder='Cost' />");

             }
          });
  });

</script>
    </head>
        <body>
        <div id="add">
        <form name="form1aa" method="post" id="form1a" >
 <div id="area">
 <input type=text name="cases"  placeholder="Cases ID">
         <select id="claim" name="claim">
            <option value="">Select a Claim</option>
        <option value="Insurance">Insurance</option>  
        <option value="Warranty">Warranty</option>
        </select>
        </div>
    <select name="type" onChange=" fill_damage (document.form1aa.type.selectedIndex); ">
    <option value="">Select One</option>
    <option value="Hardware">Hardware</option>
    <option value="Software">Software</option>
    </select>

    <select name="damage">
    </select>
    <br />
    <input type=text name="comment"  placeholder="Comments Box">
    <input type="submit" value="Submit" name="Submit">
    </form>
    </div>
    <?  

        $sql="SELECT * FROM $tbl_name ORDER BY cases ASC";

    if(isset($_POST['tpc'])){
        $sql="select * from $tbl_name WHERE class LIKE '1%' ORDER BY cases ASC";
    }
    if(isset($_POST['drc'])){
        $sql="select * from $tbl_name WHERE class LIKE 'D%' ORDER BY cases ASC";
    }
    if(isset($_POST['bsc'])){
        $sql="select * from $tbl_name WHERE class LIKE 'B%' ORDER BY cases ASC";
    }
    $result=mysql_query($sql);

    ?>

<!-- Filter p1 (Start of) !-->
<form action="ajax-with-php.php" target="_self">
<input type="submit" name="all" value="All" />  // the issue is mainly occuring here when i click any of thesse meant to refesh the page and change the query with the if statements but is trigger the other code i commented
<input type="submit" name="tpc" value="TPC" /> 
<input type="submit" name="drc" value="DRC" />
<input type="submit" name="bsc" value="BSC" />
</form>

Answer 1

 $('form').bind('submit', function(event){  
    event.preventDefault();
    $.ajax({...

尝试进行上述更改1）将event参数添加到回调中2）执行.preventDefault()方法。将AJAX与提交事件一起使用时，必须停止重新加载和中断异步请求。

可能会有更多问题，但希望这会让你走上正轨。

Answer 2

$('form').bind('submit', function(){ ...

将绑定到所有表单。将其更改为

$('form#form1a').bind('submit', function(){ ...

它只会绑定到第一个表单，而不是第二个表单。

ajax事件的问题

2 个答案: