使用Ajax将值从html表单传递到php

Passing a value from html form to php using Ajax

本文关键字：php 表单 html Ajax 使用      更新时间：2023-09-26

我很难找到一个简单的应用程序，它有一个html文件，可以使用ajax与php页面通信。index.html是：

<!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: { stName: $('#name1').val() }, // Give the input an id
        data: { stName: "Alan" }, // Give the input an id
        //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" id="name1" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>

reply.php文件是：

<?php
$message[] = "Connected successfully";
$message[] = $_POST["stName"];
print json_encode($message);
?>

当我通过谷歌浏览器查看index.html时，我会收到消息：

Uncaught SyntaxError: Unexpected token <

Chrome控制台指的是以下行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我已经尽力了，但没有成功。请帮忙吗？

只需删除此行：

headers:{"Content-Type": "application/json"},
相关文章：