0

我正在尝试在不使用 jquery 和 php 刷新页面的情况下将数据提交到 db 但我想我的代码有问题，如果我不应用 Jquery，它会很好地工作： Bellow 是我正在使用的代码。

<!---Insert into database -->
<script type="text/javascript">
$(document).ready(function () {
    $('.chatbutton').click(function () {
        $.ajax({
            type: 'post',
            url: "insertchatmessages.php",
            success: function () {}
        });
    });
});
</script>
<!---Insert into database ends here  -->

</head>
<body>
<table class="chattable" id="chattable" border="0">
<tr><td><div id="load_tweets">

</div></td></tr>
<form id ="chatform" action="?" method="post"></td></tr>
<tr><td><input class ="chattext" type ="text" name="message"></td></tr>
<tr><td><input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit">
</div>
</table>
4

5 回答 5

3

HTML（这是从您的代码派生但修改为在 jsfiddle 中工作）：

<table class="chattable" id="chattable" border="0">
<tr>
    <td>
        <div id="load_tweets"></div>
    </td>
</tr>
<tr>
    <td>
        <form id ="chatform" action="/echo/html/" method="post"> <!-- your action should point to your php (insertchatmessages.php) -->
            <input type="hidden" name="html" value="This is sample text to show that this works!"/> <!-- for jsfiddle test only. remove this in your code. -->
            <input class ="chattext" type ="text" name="message" />
            <input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit" />
        </form>
    </td>
</tr>
</table>

jQuery：

$(document).ready(function(){
    $('#chatform').submit(function(e){
        e.preventDefault();
        var $form = $(this),
        data = $form.serialize();

        $.ajax({
             data: data,
             type: $form.attr("method"),
             url: $form.attr("action"),
             success: function(data){
                  $("#load_tweets").html("<p>"+data+"</p>");
             }
        });
    });
});

工作示例：http: //jsfiddle.net/darshanags/6vxMs/6/

注意：我对您的代码进行了轻微修改以使其在 jsfiddle 上工作，您必须将其改回以使其在您的设置中工作。

于 2013-01-24T10:58:06.590 回答
3

.chatbutton是一个提交按钮。当您单击它时，jQuery 处理程序将触发，然后表单提交（这是浏览器的默认行为）。在您的 jQuery 脚本中，您必须调用preventDefault()：

$('.chatbutton').click(function(e){
e.preventDefault();
// rest of your code

更好的是，为表单提交函数分配一个处理程序（但您仍然需要防止默认行为）。

于 2013-01-24T10:58:12.427 回答
0

使用submitjquery函数。

$('#chatform').submit(function() { });

完整的JS代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function ()
{
    $('#chatform').submit(function (e)
    {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: "random.php",
            success: function (response)
            {
                //do after response.
            }
        });
    });
});

</script>
于 2013-01-24T10:57:29.367 回答
0

jQuery序列化会很有帮助

<script type="text/javascript">
$(document).ready(function () {
    $('.chatbutton').click(function (e) {
        e.preventDefault();
        $.ajax({
            data: $('chatform').serialize(),
            type: 'post',
            url: "insertchatmessages.php",
            success: function () {}
        });
    });
});
</script>
于 2013-01-24T11:34:40.633 回答
0

简单用户 e.preventDefault() 在您的 onclick 调用开始时，当您想要停止默认行为时使用它：

<script type="text/javascript">
$(document).ready(function (e) {
    $('.chatbutton').click(function () {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: "insertchatmessages.php",
            success: function () {}
        });
    });
});
</script>
于 2013-01-24T12:37:07.427 回答