ajax事件的问题

Question

i am using an ajax event which is triggered when i hit the submit button to add data to the database but since when i orignally created this page they were all in seprate files for testing purposes so now when i have put all the code together i have notice that 4 submit buttons i was using to refresh the page and then change the data being seen by filtering it are triggering the ajax query i have placed the code bellow.. i am quite stumped in what is the only way to go about this... 我正在使用一个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({...

Try making the changes above 1) adding the event argument to your callback 2) executing the .preventDefault() method. 尝试进行上述更改1）将event参数添加到回调中2）执行.preventDefault()方法。 When using AJAX with the submit event this is neccessary to stop the page from reloading and interrupting your async request. 将AJAX与提交事件一起使用时，必须停止重新加载和中断异步请求。

There may be more issues than that, but hopefully that will get you on the right track. 可能会有更多问题，但希望这会让你走上正轨。

Answer 2

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

will bind to all forms. 将绑定到所有表单。 Change it to 将其更改为

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

and it will only bind to the first form, not the second. 它只会绑定到第一个表单，而不是第二个表单。

ajax事件的问题

问题描述

2 个解决方案

解决方案1
1 2012-05-15 03:39:15

解决方案2
1 已采纳 2012-05-15 03:40:16

ajax事件的问题

问题描述

2 个解决方案

解决方案1 1 2012-05-15 03:39:15

解决方案2 1 已采纳 2012-05-15 03:40:16

解决方案1
1 2012-05-15 03:39:15

解决方案2
1 已采纳 2012-05-15 03:40:16