无法使用 jquery ajax 对我的 php 进行成功的 POST答案

【问题标题】：unable to do a successful POST to my php using jquery ajax无法使用 jquery ajax 对我的 php 进行成功的 POST
【发布时间】：2015-10-22 20:04:54
【问题描述】：

我想要做的是，将我的表单字段，即用户名和密码（加密）值发送到一个 php 文件并简单地回显它们（解密后的密码）。但是，如果我在开发人员工具中查看我的网络选项卡，它确实会从我的 html 文件中发送一个帖子，但如果我尝试查看控制台值，我的 ajax 本身不会运行成功函数，如果我尝试查看我的 php 文件它也就是不认识我的帖子。

这是我的html：

 <form id="userDetailsForm">
<div class="clear"></div> <div class="clear"></div>
<p>Add User</p>
<div class="clear"></div>
<label for="usr">Username</label>
<input type="text" name="usr" id="usr">
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd">
<button id="create" class="create" type="button" name="createButton">Create</button>

以下是jquery ajax代码：-

$("#create").click(function(){

    var passwordForNewUser=CryptoJS.AES.encrypt($("#pwd").val(),key).toString();
    var decryptedPassword=CryptoJS.AES.decrypt(passwordForNewUser,key).toString(CryptoJS.enc.Utf8);
    console.log("decrypted password: "+decryptedPassword);
    console.log("create clicked");
    formdata = {
        usr: $("#usr").val(),
        pwd: passwordForNewUser,
    };

    var userNamePresentInTable=$("#usr").val();
    var password=CryptoJS.AES.encrypt($("#pwd").val(),key).toString();
    if($("td:contains('" + formdata.usr + "')").text() === formdata.usr){
        $("#userErrorDiv").html("User already exists. Please enter another one").css("color","red");
        duplicateUser=true;
    }else{
        duplicateUser=false;

        /*before adding to table save it in localStorage*/
       /* myLocalStorage.setItem(formdata.usr,formdata.pwd);*/

        $("#userErrorDiv").html("");
        var tr=$('<tr></tr>');
        var enteredVal=$("#usr").val();

        var td_username=$('<td></td>',{
            text:  $("#usr").val()
        }).addClass("editableFields").appendTo(tr);

        var td_level=$('<td></td>', {
            text: "User"
        }).appendTo(tr);

        var td_buttons=$('<td></td>',{
            html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
        }).appendTo(tr);

        $(tr).find("button").button();
        $(".userTable").append(tr);

        $("#userDetailsForm").submit();
    }
});

 $("#userDetailsForm").submit(function(e){

    var passwordForNewUser=CryptoJS.AES.encrypt($("#pwd").val(),key).toString();

  console.log(formdata);

    if(duplicateUser || userNotPresent){
        //do nothing...no ajax
        e.preventDefault();
    }
    else{

    $.ajax({
        type:'post',
        url: '/scripts/username&passw.php',
        data: { usr: $("#usr").val(),
                pwd: passwordForNewUser
              },
        success:function(data){
            console.log("Data sent: "+data);
        },
        error: function(){
            console.log("Error encountered while sending");
        }
    });
        e.preventDefault();

    }


});

以下是我的 php 代码：-

<?php
header("Content-Type: application/json", true);

if(isset($_POST['usr'])){
    $username=$_POST['usr'];
    $password=$_POST['pwd'];
    $key="encyrptedPassword";
    $decrypted_password=mcrypt_decrypt("AES",$key,$password);
     echo "Encrypted password recieved: ".$key;
    echo "Decypted password recieved: ".$decrypted_password;
}
else    {
            echo "problem recieving form data";
}

?>

【问题讨论】：

<form id="userDetailsForm"> 如果您不指定method，则默认为GET。 <form id="userDetailsForm" method='post'>
另外我不会在文件名中使用 & 符号 - 它们被保留用于分隔 GET 请求参数：url: '/scripts/username&passw.php',
但是如果我在我的 $.ajax 中指定 POST 不应该使用那个吗？我看过这个链接，他没有使用任何形式，因为他在 ajax airpair.com/js/jquery-ajax-post-tutorial 中使用帖子
如果您输出纯文本，为什么会有header("Content-Type: application/json", true);？这将导致 jQuery 抛出错误，因为 Encrypted password recieved: 不是有效的 json..（应该收到）
你有控制台输出吗？如果成功函数不打印任何内容，则错误函数应该。

标签： php jquery ajax html post

【解决方案1】：

您的 php 端无法正常工作，因为您的 ajax 代码正在通过 POST 发送 JSON 数据。在您的 php 代码中，您需要使用 file_get_contents("php://input") 来提取用户名和密码。只需在您的 php 文件中添加类似的内容：

$incomingData = json_decode(file_get_contents("php://input"));

json_decode 会将您的 JSON 对象转换为 php 数组。然后您应该能够通过

访问这些值

$incomingData["usr"] and $incomingData["pwd"]

如果你喜欢。

【讨论】：