如何编写jQuery ajax的成功函数

时间:2017-12-29 22:06:56

标签: javascript php jquery html ajax

我开始学习jQuery(一般的web开发),在这个例子中,我应该使用.ajax和success函数将输入(使用提交按钮的用户名和密码)发送到php页面。

这是html(表单)代码:

<form id="form1">
    Enter Username :
    <input type="text" id="userName">
    <br>
    Enter Password:
    <input type="password" id="passWord">
    <br>
    <input type="submit" value="Submit" id="sub">
    <br>
</form>
<div id="result"></div>

这是jQuery代码(3个警报只是为了检查我的代码在哪里停止并且第3个警报从未到达):

$(document).ready(function(){
        $("form").submit(function(){
            alert('clicked');
            var send = $(this).serialize();
            alert('gotData');
            $.ajax({
                type: "POST",
                url: "login.php",
                data: send,
                dataType: "json",
                success: function(msg){
                    alert('inAjax');
                    $("#result").html(msg.name + " " + msg.pass);
                }
            });
            return false;
        }); 
    });

这是我的PHP代码:

<?php

$name = $_REQUEST['userName'];
$pass = $_REQUEST['passWord'];

$list = array('name' => $name, 'pass' => $pass);
$c = json_encode($list);
echo $c;

?>

代码不起作用(网页上没有任何内容)

2 个答案:

答案 0 :(得分:1)

首先,表单元素需要具有name属性。 id值与提交目的无关。

最好只使用.post()方法:

$.post('login.php', $(this).serialize(), function(resp){ alert(resp); });

如果您使用Chrome,则不要使用提醒跟踪,只需将debugger;放在功能的开头,这样就会暂停代码并为您打开检查器。

答案 1 :(得分:0)

首先检查您是否在http环境中发送请求。为此,您可以使用PHP built-in webserver作为快速解决方案。

//Choose the directory
$ cd ~/public_html
//Start the webserver on port 8000
$ php -S localhost:8000

同时将type属性更改为method

如果服务器端出现问题,请使用浏览器devtools或其他http客户端(如Postman)检查您的请求。