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>

表单与jquery不想要的工作

2 个答案: