从JS函数将表单值传递给php

时间:2014-10-11 11:01:34

标签: javascript php jquery json

我正在处理以下代码,我正在尝试将名为“stName”的输入文本的内容传递给php代码:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">

<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script charset="utf-8" type="text/javascript">
function connect()
{   
    $.ajax({
        url:'hostname/reply.php',
        headers:{"Content-Type": "application/json"},
        type:'POST',
        data:$('form').serializeArray(),
        //data:$(this),
        dataType:'JSON',
        error:function(jqXHR,text_status,strError){
            alert(strError);},
        timeout:60000,
        success:function(data){
            $("#result").html("");
                for(var i in data){
                $("#result").append("<li>"+data[i]+"</li>");                    
                }
            }
        });     
}
</script>
</head>
<body>
<center><b>My Students</b></center>
<center>
<form>
<input type="text" value="Joe" name ="stName" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>

简单的PHP代码是:

<?php    
    $data = json_decode($_POST['data'], true);
    $message[] = $data; 
    print json_encode($message);
?>

访问数据库的代码已被删除。我只是想访问表单值,它不起作用。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

Ajax与发送表单时的浏览器没有什么不同(通过action属性): 它对某些URL发出HTTP请求。对于POST请求,默认设置是以以下形式在请求正文中发送查询字符串:

key1=value1&key2=value2

你可以从URL中知道这个部分之后的部分吗?字符。

对于$ .ajax函数的参数数据,您可以准确传递此查询字符串。但是,您也可以传递一个对象,该对象会自动转换为查询字符串。例如,您的表单数据可以表示为此对象:

{
  stName: "Joe"
}

它将被$ .ajax转换为查询字符串并在Ajax请求体中发送:

stName=Joe

此查询字符串也将发送到您的脚本,您是否将使用表单元素的action属性。

在PHP脚本中,您可以通过$ _POST数组访问参数,查询字符串中的键是$ _POST数组中的键。例如,要打印出stName参数:

echo $_POST["stName"];

所有这些与JSON没什么关系。实际上,您不需要JSON才能使用Ajax。对于许多情况,发送查询字符串就足够了。您的代码可以像这样重写:

function connect()
{   
    $.ajax({
        url:'hostname/reply.php',
        type:'POST',
        data: {
          stName: $('#name-input').val() // Give the input an id
        },
        error:function(jqXHR,text_status,strError){
            alert(strError);},
        timeout:60000,
        success:function(data){
            // JSON is decoded for you if Content-Type of response is set appropriately.
        });     
}