Question

使用AJAX和jQuery进行简单GET。尝试将生成的html放入div下面的表单中。 DIV没有填充，我做错了什么？

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(
        function myFunction()
        {
            var name = document.forms["form"]["name"].value;
            $.get( "fetch-photographer.php?name="+name,(
                function( data ) {
                    $( "#responseArea" ).html( data );
                })
            );
        }
    );
</script>
</head>

<body>
<form name="form" method="post" onsubmit="myFunction()">
<input type="text" name="name" value="Enter a search">
<input type="submit" value="Submit">
</form>
<div id="responseArea"></div>
</body>

Answer 1

您有两个主要问题：

您已在另一个函数的范围内定义了myFunction。它不是全球性的，因此您无法通过onsubmit函数访问它。

让myFunction成为全局：

$(document).ready( // Remove this line
    function myFunction() {
        // ...
    }
); // Remove this line

提交表单时，您正在运行JS。

JavaScript发送HTTP请求
表格提交
页面消失
加载新页面
没有JS来处理HTTP响应

将return false添加到onsubmit功能的末尾。

<form name="form" method="post" onsubmit="myFunction(); return false;">

更好的是，使用现代方法绑定事件处理程序：

<form id="form" method="post">

$("#form").on("submit", myFunction);

function myFunction(event) {
    event.preventDefault();
    // rest of your function
}

请注意，您无法转义用户可能输入的任何特殊字符。如果您使用的是jQuery，请不要手动创建查询字符串，利用其内置函数：传递数据通过$.get的第二个参数作为对象。

$.get(
    "fetch-photographer.php",
    { name: document.forms["form"]["name"].value },
    function (data) {
        $("#responseArea").html(data);
    }
);

Answer 2

尝试使用此代码，您正尝试使用提交操作。所以一旦结果出现，页面就会刷新。因此，您将无法在div中看到AJAX响应。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
function myFunction()
{
    var name = document.forms["form"]["name"].value;
    $.get( "fetch-photographer.php?name="+name,(
        function( data ) {
            $( "#responseArea" ).html( data );
        })
    );
    return false;
}
</script>
</head>

<body>
<form name="form" method="post" onsubmit="return myFunction();">
<input type="text" name="name" value="Enter a search">
<input type="submit" value="Submit">
</form>
<div id="responseArea"></div>
</body>
</html>

Answer 3

没有必要在jquery ready函数中声明Javascript函数...我在jquery中使用表单提交事件做了同样的事情并删除了额外的对括号

 $(document).ready(function(){
        $('form').submit(function(e){
            var name = document.forms["form"]["name"].value;
            $.get( "fetch-photographer.php?name="+name,
                function( data ) {
                    $( "#responseArea" ).html( data );
                });
        });
    });

使用AJAX和jQuery </div>将结果放入<div>

3 个答案: