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非常适合），它可以帮助很多。

Answer 2

尝试在ajax请求中实现“success”功能。

$.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!');
            }
        })

使用jquery和AJAX提交表单

2 个答案: