如何使用AJAX(而不是Jquery AJAX)发送参数并使用PHP接收它

时间:2016-01-19 04:51:18

标签: javascript php html ajax

我尝试将一些AJAX(而不是Jquery AJAX)参数发送到具有HTML表单值的服务器并将其存储为数据库。但它没有正常工作。当我点击Let的开始按钮时,我收到了错误消息 这是我的代码......

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

5 个答案:

答案 0 :(得分:0)

如果您想使用GET方法发送信息,请将信息添加到URL:

xhttp.open("GET", "filename.php?fname=value&lname=value", true);
xhttp.send();

要像HTML表单一样POST数据,请使用setRequestHeader()添加HTTP标头。在send()方法中指定要发送的数据:

xhttp.open("POST", "filename.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=value&lname=value");

Refer this link for more details

答案 1 :(得分:0)

使用 Jquery ajax 将var发送到 PHP 页面。

$.ajax({
        type: "GET", (or POST)
        url: "code.php",
        data: { fullname, user_n, email },
        cache: false,
        success: function(){
      }
    });

});

答案 2 :(得分:0)

只需从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()">

答案 3 :(得分:0)

您只需将onclick="validate()"更改为onclick="sendinginfomation();"或者您可以点击onclick="sendinginfomation();validate();"

点击2功能

答案 4 :(得分:0)

假设您的validate()工作正常,并且sendinginfomation()函数中调用了validate(),我制作了代码的工作副本。我在$("#loader").fadeOut(300);中发现了一个错误。如果您未加jQuery,则无法拨打fadeOut()。但如果您已经包含jQuery,则不需要javascript函数,您可以使用jQuery ajax本身。

除此之外,您的代码工作正常。