1

チャットシステムを作成しています。jqueryのajaxメソッドでフォームデータを送信しています。私の最初の問題は、ajax メソッドがデータを process.php に送信せず、ページが自分自身にリダイレクトされることです。

<div id="chatOutput"></div>
<form id="myform">
    <textarea id="chatInput" name="chatInput"></textarea>
    <input type="submit" id="send" name="send" value="send" />
</form>

スクリプトは次のとおりです。

$('#send').click(function () {
    $('#myform').submit();
    $.ajax({
        url: 'process.php',
        type: 'post',
        dataType: 'json',
        data: $('#myform').serialize(),
        success: function () {
            alert("Submitted!"); // for testing
        }
    });
    return false;
});

しかし、スクリプトが機能せず、ページが更新され、get メソッドのようにアドレス バーに変数とその値が表示されます。

この問題が解決した場合、process.php は chat.txt を作成し、#chatInput からのデータを追加します。そして、chat.txt のデータを #chatOutput に追加します。

データを追加した後、 div#chatOutput のサイズが変更されます。このdivの幅と高さを固定/指定したい。サイズを固定した後、一番下までスクロールして最後のチャットを表示するにはどうすればよいですか?

4

4 に答える 4

0

編集 構文エラーがありました。e.preventDefault(); があることを確認してください。イベントクリック機能の最初のものとして。後でエラーが発生した場合でも、デフォルトのアクションは防止されます。

$('#send').click( function(e) {
    e.preventDefault(); //disable default action

    $('#myform').submit();
        $.ajax({
            url: 'process.php',
            type: 'post',
            dataType: 'json',
            data: $('#myform').serialize(),
            success: function() {
               alert("Submitted!"); // for testing
            }
        });
    });

    return false; //return something
});
于 2013-08-25T09:56:39.137 に答える
0

あなたはただ行うことができます：

$('#myform').submit(function() {
    $.ajax({
        url: 'process.php',
        type: 'post',
        dataType: 'json',
        data: $('#myform').serialize(),
        success: function() {
           alert("Submitted!"); // for testing
        }
    });
    return false;
});

$('#myform').submit();通常の方法でフォームを送信するだけで、その後ajaxなどを無視して使用しました。

また、このコードをフォーム自体の後またはフォーム内に配置します。$(function(){ ... });

于 2013-08-25T09:56:51.320 に答える
0

問題はここにあります：

$('#myform').submit();

「送信」ボタンのクリックイベントをシミュレートします

于 2013-08-25T09:58:29.520 に答える