Question

我的jsp页面中有2个表单，myform2和myform3。我使用AJAX在同一页面上显示结果。当我只为myform2做它时它工作正常，但是一旦我为myform3做了同样的事情，点击myform3的按钮工作正常但是当我点击提交myform2时，它也会显示myform3的结果，即我在myform3上获得2个结果，而不是myform2和myform3中的其中一个。这是我的jsp代码：

<form id="myform2" name="myform2"
            action="/AWSCustomerJavaWebFinal/ServiceInstances" method="get"
            onsubmit="return messagePrompt()">
            <select name="availableRegion" id="availableRegion"
                style="width: 142px; margin-left: 15px;" class="btn btn-primary">
                <option value="sr">Select Region</option>
                <option value="us-east-1">North Virginia</option>
                <option value="us-west-2">Oregon</option>
                <option value="us-west-1">North California</option>
                <option value="eu-west-1">Ireland</option>
                <option value="eu-central-1">Frankfurt</option>
                <option value="ap-southeast-1">Singapore</option>
                <option value="ap-northeast-1">Tokyo</option>
                <option value="ap-southeast-2">Sydney</option>
                <option value="sa-east-1">Sao Paulo</option>
            </select> <input type="submit" value="View Status" id="button2"
                class="btn btn-primary"><br></br>
            <div id='content'></div>
        </form>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

        <script type="text/javascript">
            var form = $('#myform2');
                form.submit(function() {

                    $.ajax({
                        type : form.attr('method'),
                        url : form.attr('action'),
                        data : form.serialize(),
                        success : function(data) {
                            var result = data;
                            $('#content').html(result);
                        }
                    });
                    return false;
                });
        </script>
    </div>
    <br>
</fieldset>
<div class="container">
    <form id="myform3" name="myform3" action="viewSchedule.jsp"
        method="get">
        <br> To view Schedule: <input type="submit"
            value="View Schedule" id="button3" class="btn btn-primary">

        <div id='content1'></div>
    </form>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
            var form = $('#myform3'); 
                form.submit(function() {
                    $.ajax({
                        type : form.attr('method'),
                        url : form.attr('action'),
                        data : form.serialize(),
                        success : function(data) {
                            var result = data;
                            $('#content1').html(result); 
                        } 
                    }); 

                    return false; 
                });
        </script> 
</div>

Answer 1

jQuery是一个库，只应加载一次。您有jquery-1.10.2.min.js的第二个脚本引用将覆盖现有的jQuery实例。这可以完全删除。

通过对两种形式的单一绑定，也可以实现您正在做的事情。确切的实现可以通过多种方式处理，但最简单的方法是更改#content和#content1以使用公共类：

// target both forms at once
var forms = $('#myform2, #myform3');

forms.submit(function() {

   // get only the form being submitted
   var form = $(this); 

   $.ajax({
     type: form.attr('method'),
     url: form.attr('action'),
     data: form.serialize(),
     success: function(result) {
        form.find('.content').html(result);
     }
   });

   return false;
});

请注意，上述代码必须在DOM中#myform2和#myform3都可用时执行，这意味着您不能将其放在{{1}的位置绑定当前是，但如果你把它放在#myform2绑定的位置，你可能会没事的。为了确保文档中的所有元素都可用于javascript操作，您可以将脚本推迟到DOMReady，方法是将其包装在jQuery DOMReady侦听器中，速记为#myform3：

$()

2表单提交显示相同的结果AJAX

1 个答案: