Passing a value from html form to php using Ajax

Question

I am struggling with a simple application with one html file that communicates with a php page using ajax. The index.html is:

<!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>

And the reply.php file is:

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

When I view the index.html through Google Chrome, I get the message:

Uncaught SyntaxError: Unexpected token <

The Chrome Console refers to the following line:

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

I have tried everything I can with no luck. Any help please?

Looks like content type headers issue, [possibly related](http://stackoverflow.com/questions/24311023/unexpected-token-colon-json-after-jquery-ajaxget) — pimmey, Oct 14 '14 at 08:09
is it working fine for you in other browsers? as u specified that in chrome you getting this err — Naincy, Oct 14 '14 at 08:29

score 0 · Answer 1 · answered Oct 14 '14 at 08:15

0

Just remove this line:

headers:{"Content-Type": "application/json"},

answered Oct 14 '14 at 08:15

noufalcep

3,446
15
33
51

this is not correct solution. Setting header or giving datatype as json both are fine. Refer: http://stackoverflow.com/questions/2722750/ajax-datatype – Naincy Oct 14 '14 at 08:27
Thank you very much noufalvep. I removed the line and it worked fine. Thank you Naincy. – Simon Oct 14 '14 at 08:43

Passing a value from html form to php using Ajax

1 Answers1