Question

我有一个包含3个字段的表单。我想通过ajax调用提交表单，但我提交的问题。我对绑定ajaxform的调用不起作用。我不知道是什么原因引起了这个问题。

我的JavaScript：

 $(document).ready(function () {
    alert("rock");
    $('#writeSubmit').bind('click', function (event) {
        alert("after submit");
        $('#writeReviewAjaxForm').ajaxSubmit({
            target: $('#response')
        });
    })
});

HTML：

<div id="write-review-form" class="write-review">
    <h3><spring:theme code="pdp.write.review" text="Write a Review" /> </h3>
    <form:form id="writeReviewAjaxForm" commandName="reviewForm" method="post" action="${productCode}/write-review">

        <div class="field-container required">
            <label for="myname">
                <spring:theme code="pdp.write.headline" text="Headline" />
            </label>
            <form:input path="headline" />
        </div>
        <div class="rating">
            <spring:theme code="pdp.write.rating" text="Rating" />
            <br>
            <form:select path="rating">
                <form:option value='1'>&#9733</form:option>
                <form:option value='2'>&#9733 &#9733</form:option>
                <form:option value='3'>&#9733 &#9733 &#9733</form:option>
                <form:option value='4'>&#9733 &#9733 &#9733 &#9733</form:option>
                <form:option value='5'>&#9733 &#9733 &#9733 &#9733 &#9733</form:option>
            </form:select>
        </div>
        <div class="field-container">
            <label for="review">
                <spring:theme code="pdp.write.review.yourReview" text="Your Review" />
            </label>
            <form:textarea path="comment" />    
        </div>
        <input type="submit" value="Submit Review" id="writeSubmit" class="btn" />    
    </form:form>
</div>

<div id="response"></div>

Answer 1

我猜你有你的jquery插件。

喜欢Plugin

但是在这个插件中，您不需要点击提交的事件就可以使用：

<script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script>

Answer 2

而不是绑定到$('#writeSubmit')上的点击事件，而是应该在表单提交上绑定事件并阻止表单提交，而是使用.ajaxSubmit

使用

$(document).ready(function () {
    alert("rock");
    $('#writeReviewAjaxForm').bind('submit', function (event) {
        alert("on submit");
        event.preventDefault();
        $('#writeReviewAjaxForm').ajaxSubmit({
            target: $('#response')
        });
    });
});

这应该适用于您的用例，因为点击通常会触发未停止的表单提交事件。因此，如果您检查网络请求/服务器日志，表单将提交两次，一次是默认浏览器，一次是ajaxSubmit javascript调用。

Ajax表单不起作用，打开新页面并在页面上打印成功代码

2 个答案: