用jquery和AJAX提交表单

Question

就像主题名称所说的那样，我正在尝试使用jQuery和AJAX将变量从HTML表单传递到PHP脚本。 我之前已经做过，但是今天我无权访问这些文件。 PHP不会打印名字和姓氏。 我找到了一些示例，但无论如何我都做不到...最近几天我做错了什么？

这是HTML代码：

First Name: <br />
<input type="text" name="fname" /><br />
Last name: <br />
<input type="text" name="lname" /><br /><br />
<input type="submit" name="submit" value="Send" />

Javascript（jQuery）：

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val(); 

        $.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            dataType:"json"
        });

    }); 
});

PHP：

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    echo $fname;
    echo "<br />";
    echo $lname;    
}

Answer 1

将您的PHP更改为

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $string = $fname."<br />".$lname;
    echo $string;    
}

还有你的jQuery

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val(); 

        $.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            success: function(response){
               console.log(response);
               // YOUR OWN LOGIC
               // IE: $('#my_div').append(response);
            }

        });

    }); 
});

或将您的PHP更改为

if(isset($_POST['fname']) && isset($_POST['lname'])){
    $response = array();
    $response['fname'] = $_POST['fname'];
    $response['lname'] = $_POST['lname'];
    echo json_encode($response);  
}

还有你的jQuery

$(document).ready(function(){
    $('input[name="submit"]').click(function(){
        var fname = $('input[name="fname"]').val();
        var lname = $('input[name="lname"]').val();

    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: {fname:fname, lname:lname},
        dataType:"json"
        success: function(response){
           response = eval(response);
           console.log('First name:' + response.fname);
            console.log('Last name:' + response.lname);
               // YOUR OWN LOGIC
               // IE: $('#my_div').append('Last name: ' + response.lname);
        }

    });

  }); 
});

我没有测试过任何东西，但是它应该使您走上正确的道路。 您还可以使用beforeSend和error / fail回调进行调试，并且不要忘记检查响应（Firebug对此非常有用），这beforeSend 。

Answer 2

尝试在您的ajax请求中实现“成功”功能。

$.ajax({
            type: 'POST',
            url: 'index.php',
            data: {fname:fname, lname:lname},
            dataType:"json",
            beforeSend: function() {

            },
            complete: function() {

            },
            error: function(xhr, ajaxOptions, thrownError) {

            },
            success: function(result) {
                //-- success! 
                alert('it works!');
            }
        })