首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将ajax POST发送到php

如何将ajax POST发送到php
EN

Stack Overflow用户
提问于 2013-09-20 07:24:05
回答 5查看 69K关注 0票数 6

我似乎想不出如何使用ajax来发布。我做了一个愚蠢的表单来尝试它,即使在将它一直减少到只有两个值之后,仍然不能得到任何工作。我的html是这样的:

代码语言:javascript
复制
<html>
<head>
<script type="text/javascript" src="j.js"></script>
<title>Test this<
<body>/title>
</head>
<form name="testForm" onsubmit="postStuff()" method="post">
First Name: <input type="text" name="fname" id="fname" /><br />
Last Name: <input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit Form" />
</form>
<div id="status"></div>
</body>
</html>

然后,到目前为止,我的外部javascript只是一个函数:

代码语言:javascript
复制
function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "processForm.php";
var fn = document.getElementById("fname").value;
var ln = document.getElementById("lname").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("status").innerHTML = return_data;
    }
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}

而我的php只是回应这些东西:

代码语言:javascript
复制
<?php
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
echo $firstname ." - ". $lastname ."<br />";
?>

我在firebug和chrome的工具中找不到任何问题..有人能告诉我我做错了什么吗?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-09-20 08:06:29

制作:

代码语言:javascript
复制
<form name="testForm" onsubmit="postStuff()" method="post">
First Name: <input type="text" name="fname" id="fname" /> <br />
Last Name: <input type="text" name="lname" id="lname" /> <br />
<input type="submit" value="Submit Form" />
</form>

添加到按钮标记中:

代码语言:javascript
复制
<form name="testForm">
First Name: <input type="text" name="fname" id="fname" /> <br />
Last Name: <input type="text" name="lname" id="lname" /> <br />
<button type="button" onclick="postStuff();">Submit Form!</button>
</form>

据我所见,页面会从表单提交中刷新。如果您使用的是ajax,则不需要使用表单。

另请阅读:Why is using onClick() in HTML a bad practice?,因为不管怎样,您都是将post封装在一个函数中。

编辑:我刚刚注意到你的标题和标题标签在你上传的源代码中被破坏了。

票数 3
EN

Stack Overflow用户

发布于 2013-09-20 07:35:58

我是这样做的:

在html文件中放入<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></SCRIPT>

然后,您可以调用此函数,该函数将调用(在我的示例中) queryDB.php脚本。

代码语言:javascript
复制
function queryDB(db,query,doAfter){
$.ajax({
    type: 'POST',
    data: { host: "localhost",
            port: "5432",
            db: db,
            usr: "guest",
            pass: "guest",
            statemnt: query
        },
    url: 'scripts/php/queryDB.php',
    dataType: 'json',
    async: false,

    success: function(result){
        // call the function that handles the response/results
        doAfterQuery_maps(result,doAfter);
    },

    error: function(){
        window.alert("Wrong query 'queryDB.php': " + query);
    }
  });
};
票数 3
EN

Stack Overflow用户

发布于 2013-09-20 07:41:22

你需要在函数的末尾返回false。

代码语言:javascript
复制
function postStuff(){
  // Create our XMLHttpRequest object
  var hr = new XMLHttpRequest();
  // Create some variables we need to send to our PHP file
  var url = "processForm.php";
  var fn = document.getElementById("fname").value;
  var ln = document.getElementById("lname").value;
  var vars = "firstname="+fn+"&lastname="+ln;
  hr.open("POST", url, true);
  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  // Access the onreadystatechange event for the XMLHttpRequest object
  hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("status").innerHTML = return_data;
    }
  }
  // Send the data to PHP now... and wait for response to update the status div
  hr.send(vars); // Actually execute the request
  document.getElementById("status").innerHTML = "processing...";
  return false;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18906547

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档