Question

我正在尝试创建一个将大量使用ajax（jquery）的网站。为此，我想使用外部$ .ajax函数并在需要时传递参数。我想要一个完整的例子来指导我。我在服务器端使用php，返回的数据将是json。我在服务器端没有问题，但无法让任何ajax工作。请非常感谢您对示例方面的任何帮助。

我的第一个例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>


$(document).ready(function(){

        $("#find").click(function(){

            $.ajax({
                // the URL for the request
                url: "findPatient.php",
                // the data to send (will be converted to a query string)
                data: {pnhsno: $('#search').val()},
                // whether this is a POST or GET request
                type: "GET",
                // the type of data we expect back
                dataType : "json",


                // code to run if the request succeeds;
                // the response is passed to the function
                success: function(json){

                    $("#ex1").val(json[0].firstname);

                }


            });


        });
});

</script>


<link rel = "stylesheet" type ="text/css" href = "pascss/patient.css " >
</head>
<body>

<div id="wrapper">  

<form class="form-patient" ">
<fieldset>
<legend>Patient Details</legend>
<label for="ex1">First name</label>
<input type="text" name="ex1" id="ex1" />
</fieldset>
</form>

<form class="form-wrapper">
<fieldset>
<legend>Find Patient</legend>
    <input type="text" id="search" placeholder="Enter patient NHS number" required>
    <input type="submit" value="Find" id="find" onclick =">


    </fieldset>
</form>



</div>

</body>
</html>

即使这个例子也没有完全奏效。它似乎正在让正确的json回归并在完成文档完成之前将其显示在文本框上一毫秒。完成功能。完成后再次擦除文本框中附加的文本。我只是无法理解它。可以请有人为我解释。非常感谢

Answer 1

提交表单会加载新页面并清除现有页面。

如果JavaScript成功，则阻止默认表单操作。

// Capture the event object
...click(function(event){

然后，最后：

event.preventDefault();

外部$ .ajax函数，其中包含url，方法数据和返回传递的数据等参数

1 个答案: