如何通过Ajax和PHP传递表单

Question

I'm new to this, I just want it to work with simple code then i'll add onto it. But it's not working in the sense that i don't get an echo. I just want to submit a form and have it not refresh the page.

here is my form

<form >
 <input type="text" id="name" >
 <input type="submit" value="s"  onclick="return chl()" >
</form>

here is my js

<script>
function chl(){

  var name= document.getElementByID('name').value;
  var dataString='name' + name; 

  $.ajax({
     type:"post",
     url:"hi.php",
     data:dataString,
     cache:false,
     success: function(html){
       alert ("success"); 
     }
   });
   return false;
}
</script>

and here is my php

<?php

$name=$_POST ['name'];
echo "response".$name; 

?>

Answer 1

The datastring should be formed like a querystring; you've missed the = between the key and the value:

var dataString = 'name=' + name; 

That being said, you can improve your code. Firstly you should attach the event to the submit of the form, and use event.preventDefault() to stop the normal form submission. Also, you can use serialize() to generate an object containing the forms' values to pass across in the AJAX request. The response from your PHP code will be retuned in the parameter sent to the success handler, so you need to do something with it there. Lastly, you should attach your events in JS, not HTML attributes, for a better separation of concerns. Try this:

<form method="hi.php">
    <input type="text" id="name" />
    <input type="submit" value="s" />
</form>

$('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "post",
        url: this.action,
        data: $(this).serialize(),
        cache: false,
        success: function(html){
             alert(html); // = 'response: name = [VALUE]'
        }
    });
});

$name = $_POST['name'];
echo "response: name = ".$name;