如何使用 AJAX(不是 Jquery AJAX)发送参数并使用 PHP 接收它
How to send parameter with AJAX(not Jquery AJAX) and receive it with PHP
我正在尝试将一些AJAX(不是Jquery AJAX)参数发送到具有HTML表单值的服务器并将其存储为数据库。但它不能正常工作。当我点击"让我们开始"按钮时,我收到了错误消息这是我的代码....
<div class ="col-xs-12 col-md-12 col-sm-12 col-lg-12" id ="AJAXsignup">
<h3>Creating a new account...</h3>
<input class ="form-control" type ="text" name ="fullname" placeholder ="Type your name eg:-Jhon Smith" id ="namefull">
<span class ="label label-warning" id ="err_fullname">You should type your name</span>
<input class ="form-control" type ="text" name ="username" placeholder ="Type your user name eg:-Jhon 95" id ="nameuser" style ="margin-top:5px;">
<span class ="label label-warning" id ="err_username">Missing username</span>
<div class ="input-group">
<span class ="input-group-addon">@</span>
<input class ="form-control" type ="email" name ="email" placeholder ="Type your Email" id ="email" style ="margin-top:5px;">
<span class ="label label-warning" id ="err_email">Missing email</span>
</div>
<input class ="form-control" type ="password" name ="password" placeholder ="Type your Password" id ="pass" style ="margin-top:5px;">
<span class ="label label-warning" id ="err_password">Missing Password</span>
<input class ="form-control" type ="password" name ="password" placeholder ="Repeat your Password" id ="repass" style ="margin-top:5px;">
<span style ="margin-bottom:5px;" class ="label label-warning" id ="err_repass">Repeat Password</span>
<img class ="col-sm-offset-5 col-md-offset-5 col-lg-offset-5" src ="images'Preloader_2.gif" id ="loader" style ="display:none;" style ="margin-bottom:5px;">
<input class ="btn btn-lg btn-info col-md-12 col-lg-12 col-sm-12 col-xs-12" type ="submit" id ="btn" value ="Let's start!" style ="margin-bottom:5px;" onclick = "validate()">
<input class ="btn btn-lg btn-danger col-md-12 col-lg-12 col-sm-12 col-xs-12"type ="button" id ="frm-can" value ="No.Thanks">
</div>
JAVASCRIPT 代码
function sendinginfomation(){
if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlhttp = new XMLHttpRequest();
}
var fullname = document.getElementById('namefull').value;
var user_n = document.getElementById('nameuser').value;
var email = document.getElementById('email').value;
var user_p = document.getElementById('pass').value;
xmlhttp.open("GET",'php/signup.php?w='+fullname+"&n_p="+user_n+"&tv="+email+"&q="+user_p,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4){
$("#loader").fadeOut(300);
document.getElementById('AJAXsignup').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
PHP代码
$fullname = $_GET['w'];
$username = $_GET['n_p'];
$email = $_GET['tv'];
$password = $_GET['q'];
$server = "localhost";
$username = "root";
try{
$conn = new PDO("mysql:host=$server;dbname=reg_mem",$username);
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO mem_info(Full_name,User_name,Email,Password) VALUES($fullname,$username,$email,$password)";
$conn->exec($sql);
echo "The infomation sent sunncessfully.";
}catch(PDOException $e){
echo "The infomation unable to send right now";
}
使用 Jquery ajax 将 var 发送到 PHP 页面。
$.ajax({
type: "GET", (or POST)
url: "code.php",
data: { fullname, user_n, email },
cache: false,
success: function(){
}
});
});
如果要
使用 GET 方法发送信息,请将信息添加到 URL:
xhttp.open("GET", "filename.php?fname=value&lname=value", true);
xhttp.send();
要像 HTML 表单一样发布数据,请使用 setRequestHeader() 添加一个 HTTP 标头。在 send() 方法中指定要发送的数据:
xhttp.open("POST", "filename.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=value&lname=value");
有关更多详细信息,请参阅此链接
只需从 HTML 更改此行即可。
<input class ="btn btn-lg btn-info col-md-12 col-lg-12 col-sm-12 col-xs-12" type ="submit" id ="btn" value ="Let's start!" style ="margin-bottom:5px;" onclick = "validate()">
自
<input class ="btn btn-lg btn-info col-md-12 col-lg-12 col-sm-12 col-xs-12" type ="submit" id ="btn" value ="Let's start!" style ="margin-bottom:5px;" onclick = "sendinginfomation()">
您只需要将onclick="validate()"
更改为onclick="sendinginfomation();"
或者您可以在单击时调用 2 函数,例如onclick="sendinginfomation();validate();"
假设您的validate()
正常工作并且从validate()
函数中调用sendinginfomation()
我制作了您的代码的工作副本。我在$("#loader").fadeOut(300);
中发现了一个错误。如果您没有包括jQuery
则无法致电fadeOut()
。但是如果你已经包含了jQuery
不需要javascript函数,你可以使用jQuery ajax本身。
除此之外,您的代码工作正常。
相关文章:
- 将数据保存到数据库(ajax/php)后,使文本字段变灰/禁用
- 如何从ajax php中获取值(can'tget)
- Ajax/Php得到一个以上的结果
- JQuery Ajax PHP中的错误和成功处理
- 通过AJAX/PHP将数据发送到点击的url
- AJAX PHP评论框userid=0?回复=“&”;
- 如何通过ajax php将图像上传到服务器本地目录,其中html表单haven't任何传统的提交按钮
- 远程javascript ajax php攻击
- 从复选框 ajax php javascript 中检索值
- AJAX PHP 连接将行插入数据库
- 我的 Ajax php 代码无法正常工作
- Ajax-PhP communication
- 通过Ajax PHP从Javascript onClick更新数据库
- Ajax/php创建了一个数组——如何以.txt的形式下载给用户
- 检查从ajax/php返回的数据
- 使用AJAX/PHP让HTML按钮将数据插入MySQL数据库
- JQuery $.ajax + php - not run
- 联系表单Javascript/Ajax/PHP不是't工作
- ajax/php注释系统不工作
- jQuery倒计时-应用于通过AJAX/PHP加载的新元素