Question

我是新手，我只是希望它能够使用简单的代码，然后我会添加到它上面。但它没有起作用，因为我没有得到回音。我只是想提交一份表格并让它不刷新页面。

这是我的表格

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

这是我的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>

这是我的php

<?php

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

?>

Answer 1

数据字符串应该像查询字符串一样形成;您错过了密钥和值之间的=：

var dataString = 'name=' + name;

话虽如此，您可以改进您的代码。首先，您应该将事件附加到表单的submit，并使用event.preventDefault()来停止正常表单提交。此外，您可以使用serialize()生成包含表单的对象＆＃39;要在AJAX请求中传递的值。您的PHP代码的响应将在发送到success处理程序的参数中重新调整，因此您需要在那里执行某些操作。最后，您应该在JS中附加事件，而不是HTML属性，以便更好地分离关注点。试试这个：

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

Answer 2

表格

<form name="test" id="test">
 <input type="text" id="name" >
 <input type="submit" value="s" >
</form>

脚本

<script>
$("#test").submit(function(e){
  e.preventDefault();
  var name= document.getElementByID('name').value;

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

Answer 3

您也可以尝试使用 -

var dataString = $('form').serialize();

如果你有许多输入字段，你就可以摆脱datastring的生成。

Answer 4

更改ajax函数并发送数据如下所示，你的php和js函数必须在不同的页面中

http://wiki.apache.org/solr/XsltResponseWriter

Answer 5

<form method="POST" action="server.php">
    <input type="text" name="name" id="myName" >
    <input type="submit" value="s"  onclick="chl(); return false;" >
</form>

<script>
    function chl()
    {
        var nameElement = document.getElementById("myName");  
        //Creates formData object and sends it to PHP script
        var formData = new FormData();
            //name equals to input element name attribute value    
            formData.append(nameElement.name, nameElement.value);
         var xmlHttp = new XMLHttpRequest();
             xmlHttp.onreadystatechange = function()
             {
                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
                 {
                     alert(xmlHttp.responseText);  
                 }
             }
             xmlHttp.open("POST", "server.php");
             xmlHttp.send(formData);

    }

</script>


<?php
    $name = $_POST['name'];
    echo $name;
?>

如何通过Ajax和PHP传递表单

6 个答案: