使用ajax请求存储表单数据

时间:2016-07-27 08:42:07

标签: javascript php jquery ajax

我试图使用ajax存储我的表单数据,但它给了我错误。 我在js文件中提交表单数据,该文件调用另一个php文件来执行插入操作。 这是我的代码:

  <button id="submit" class="btn btn-primary" type="submit" onclick="myFunction()" >Create an Account</button>

点击该按钮调用js文件 的 serve.js

 function myFunction(){


           var name = document.getElementById("firstName").value;
            var lname = document.getElementById("lastName").value;
            var mail = document.getElementById("email").value;
            var password =document.getElementById("password").value;

            var confpass= document.getElementById("passwordConfirmation").value;

                   // var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
            if(password != confpass)
            {
                alert ('password doesnot match!');
            }

            // var form_data = $('#edit_user').serialize();
         var datastring= 'name1=' + name + 'name2=' + lname +'email='+mail+ 'pass='+password;

           $.ajax({
        url: "learnapi.php",
        type: "get",
        dataType: "json",
        data: {type: "signup", datastring:datastring },
        //type: should be same in server code, otherwise code will not run
        ContentType: "application/json",
        success: function (response) {
            alert(JSON.stringify(response));
        },
        error: function (err) {
            alert(JSON.stringify(err));
        }
    });
};

通过ajax请求执行插入操作 的 learnapi.php

<?php
 header('Access-Control-Allow-Origin: *');
mysql_connect("localhost","root","");
mysql_select_db("learnapp");
if(isset($_GET['type']))
{
   $res = [];


  if($_GET['type'] =="signup"){
    $name  = $_GET ['name1'];
    $lname = $_GET['name2'];

    $passW = $_GET['pass'];
  //  $passW1 = $_GET['Pass1'];
    $mail  = $_GET ['email'];



    $query1  = "insert into signup(firstname,lastname,password,email) values('$name','$lname','$passW','$mail')";
    $result1 = mysql_query($query1);

    if($result1)
    {
        $res["flag"] = true;
        $rest["message"] = "Data Inserted Successfully";
    }
    else
    {
        $res["flag"] = false;
        $rest["message"] = "Oppes Errors";
    }
    } 


else{
$res["flag"] = false;
$rest["message"] = "Invalid format";
    }

 echo json_encode($rest);
}  
?>

它给我的错误是: error message

3 个答案:

答案 0 :(得分:0)

删除onclick属性并使用事件侦听器

$('#submit').on('click',myFunction(event));

将数据更改为

 data: JSON.stringify({type: "signup",name1:name ,name2:lname,email:mail,pass:password});

阻止提交将此添加到您的功能

event.preventDefault();

将此添加到您的php页面

header('Content-Type: application/json');

使用mysqli或pdo更改语法尝试,不再使用当前语法

答案 1 :(得分:0)

你传递参数是错误的。用以下内容替换您的ajax数据并删除“var datastring”。

data: {type: "signup", name1: name,name2:lname,email:mail,pass:password },

答案 2 :(得分:0)

而不是json数据使用ajax方法中的post数据

$.ajax({
    url: "learnapi.php",
    type: "get",
    dataType: "json",
    data: {type: "signup", datastring:datastring },
    //type: should be same in server code, otherwise code will not run
    ContentType: "application/json",
    success: function (response) {
        alert(JSON.stringify(response));
    },
    error: function (err) {
        alert(JSON.stringify(err));
    }
});

使用post方法只是给你一个想法

<script type="text/javascript">
    function xxx(x1,x2)
    {
        $.post(
            "yy.php", // target post file
            {data: data, display: display,user: user,password: password}, 
    .......
  </script>

在learnapi.php中 使用$ _POST方法代替$ _GET方法