页面刷新，而不是阿贾克斯负荷而不 [英] Page refresh instead of Ajax Load without

问题描述

在表单提交我想加载一个div与一个MySQL表的更新列表。我'跨越发送表单变量到PHP和张贴到MySQL表。在同一页面显示完整的表数据。我想将数据加载到同一个div标签的形式。所以似乎正在被信息的形式上面加载。

On form submit i want to load a div with an updated list of a mysql table. I'am sending the form variables across to a php and posting them into a mysql table. the same page displays the full table data. I want to load the data into the same div tag as the form. So it appears that the information is being loaded above the form.

我的JavaScript

My Javascript

$("#formSubmit").submit(function(){

    var name = $("input#name").val();
    var comment = $("input#comment").val();
    var filmnumber = $("input#hidden").val();

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber;

    $.ajax({
        type: "POST",
        url: "comment.php",
        data: dataString,
        success: function() {
            $('#2').load('comment.php');
        }
    });

我的状态 -

My form -

<div id="2">                                    
    <p>Add a Comment</p>
    <form id="formSubmit" method="POST">
        <div>
            <input type="hidden" name="hidden" id="hidden" value="2">
            <label for="name">Your Name</label>
            <input type="text" name="name" id="name" />

            <label for="body">Comment Body</label>
            <textarea name="comment" id="comment" cols="20" rows="5"></textarea>

            <input type="submit" id="comment" class="button" value="Submit" />
    </form>
    </div>

所有它做的是刷新页面，而不是加载中的信息DIV 2：•

All it is doing is refreshing the page and not loading the information in to div 2 :S

感谢您的帮助

推荐答案

您需要prevent从使用 preventDefault 方法重定向页面的形式活动对象：

You need to prevent the form from redirecting the page using the preventDefault method on the event object:

$("#formSubmit").submit(function(e){ // add the event object as an argument to your function
    e.preventDefault(); // right here

    var name = $("input#name").val();
    var comment = $("input#comment").val();
    var filmnumber = $("input#hidden").val();

    var dataString = 'name='+ name + '&comment=' + comment + '&filmnumber=' + filmnumber;

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: dataString,
      success: function() {
       $('#2').load('comment.php');
      }
    });
});

这篇关于页面刷新，而不是阿贾克斯负荷而不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！