jquery - 带有jquery的表单不需要工作

Question

我尝试了一次又一次，但最终没有得到使用 jquery 和 json 的这种形式：

<script>
var idcc="<?php echo $tfw_number_format;?>";
</script>


<script>
$('#contact-form-widget-'+idcc).on('submit',function () {
    $.ajax({
        url: '<?php echo $phpValidate;?>',
        cache: false,
        type: 'POST',
        data : $('#contact-form-widget-'+idcc).serialize(),
        success: function(json) {
            alert('all done');
        }
    });
});
</script>


<form id="contact-form-widget-<?php echo $tfw_number_format;?>" class="contact-form-widget" method="post" action="">
    <input type="text" name="" value="" class="contact_text">
    <input class="contact_rapid_boton" type="submit" value="Send">
</form>

问题是当我按下按钮时总是转到其他页面，没有停留和工作，不知道有什么坏处，因为我看得很清楚，但肯定有些东西根本不工作

Answer 1

包括 jQuery，使用 DOM 就绪处理程序，并防止表单提交和重新加载页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    var idcc = "<?php echo $tfw_number_format;?>";
    $(function() {
        $('#contact-form-widget-'+idcc).on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url  : '<?php echo $phpValidate;?>',
                type : 'POST',
                data : $('#contact-form-widget-'+idcc).serialize(),
                success: function(json) {
                    alert('all done');
                }
            });
        });
    });
</script>

<form id="contact-form-widget-<?php echo $tfw_number_format;?>" class="contact-form-widget" method="post" action=""></form>

Answer 2

利用event.preventDefault()

<script type="text/javascript">
$('#contact-form-widget-'+idcc).on('submit',function (event) {

    event.preventDefault();

    $.ajax({
        url: '<?php echo $phpValidate;?>',
        cache: false,
        type: 'POST',
        data : $('#contact-form-widget-'+idcc).serialize(),
        success: function(json) {
            alert('all done');
        }
    });
});
</script>