调用 AJAX 以使用按钮发送值

Question

我阅读了很多类似的问题，并尝试了所有解决方案，但似乎没有任何效果。我想通过单击按钮发送 AJAX 请求，然后发送用户在 textarea 中键入的内容，并将其显示在 div（聊天框）中。当我单击按钮时，什么也没有发生。它从不调用具有 AJAX 代码的函数。你有什么想法吗？

附：我包含了 JavaScript 文件，但没有任何改变。

<form action="ajax()">
    <textarea id="txtArea" name="txtArea" ></textarea>
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">

 //AJAX function
function ajax() {
    alert("insert");
    var txtArea = $("#txtArea").val();

    $.ajax({
        type: "POST",
        url: "InsertMessage.php",
        data: {
            txtArea: txtArea
        }
        success: function(data) {
            alert(data);
            $("#chatbox").load("DisplayMessages.php")
            $("#txtArea").val(""); //Insert chat log into the #chatbox div				
        }
        error: function() {
            alert('there was an error, write your error handling code here.');
        }
    });
}

$(document).ready(startAjax);
//setInterval(function(){
//	$("#chatbox").load("DisplayMessages.php");		
//}//,1400);
	
</script>

Answer 1

您的问题不太清楚，但是对于在提交表单时在 post 方法中发送数据然后在 div 中显示结果，请尝试以下操作：

html:

    <form>
        <textarea id="txtArea" name="txtArea" ></textarea>
        <input type="submit">
    </form>

    <div id="resultDiv">
    </div>

js:

$( "form" ).submit(function( event ) {
    var txtArea = $("#txtArea").val();
    $.ajax({
                type:"POST",
                url:"InsertMessage.php",
                data:{txtArea:txtArea}
                success: function(data){
                    alert(data);                        
                    $("#resultDiv").html(data);           
                }
                error: function(){
                     alert('there was an error, write your error handling code here.');
                }
        });
});

Answer 2

action 属性必须包含 URL，而不是 Javascript。您可以使用：

<form action="javascript:ajax()">

或：

<form onsubmit="ajax(); return false;">

或者你可以在jQUery中绑定事件：

$(document).ready(function() {
    $("form").submit(function() {
        ajax();
        return false;
    });
});