Ajax脚本无响应

Question

我已经创建了一个Ajax脚本，但是它似乎没有用。该脚本使用Jquery更新mysql DB中的用户名和姓氏，并在更新过程中加载gif。但是脚本似乎无法运行，甚至加载程序也无法运行！显示名称更改的情绪框的jQuery和Javascript如下，

var editNameBox = document.getElementById('editName');
var editNameBtn = document.getElementById("editNameButton");
var closeEditName = document.getElementsByClassName("closeEditName")[0];
editNameBtn.onclick = function() {
  editNameBox.style.display = "block";
}
closeEditName.onclick = function() {
  editNameBox.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == editNameBox) {
    editNameBox.style.display = "none";
  }
}
$(document).ready(function(editname) {
  $(document).ajaxStart(function() {
    $("#contentLoad").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#contentLoad").css("display", "none");
  });
  $(document).on("click", "#nameChangeBtn", function() {
    var userid = $(".userid").val();
    var firstname = $("#firstNam").val();
    var secondname = $("#lastNam").val();
    $.ajax({
      url: "editProfile.php";
      type: "POST";
      dataType: "json";
      data: {
        userid: userid,
        firstname: firstname,
        lastname: lastname
      };
      success: function(response) {
        alert($editstatus);
      };
    });
  }));
});

.body {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="editNameButton"><i class="fa fa-2x fa-pencil"></i></button></p>
</p>
<div id="editName" class="editname">
  <div class="editname-content">
    <div class="contentloader" id="contentLoad"><img src="loaders/ripple-loading.gif" height="100px" width="100px" alt="Loader" /><br>
      <strong>Loading... </strong></div>
    <span class="closeEditName">&times;</span>
    <p class="center"><strong>Edit Your Name</strong><br>
      <hr>
    </p>
    <br><br>
    <label><strong>First Name:</strong></label><br>
    <input type="name" placeholder="<?php echo ' '. $userData['first_name'] ?>" class="firstname" id="firstNam" /><br><br>
    <label><strong>Last Name:</strong></label><br>
    <input type="name" placeholder="<?php echo ' '. $userData['last_name'] ?> " class="secondname" id="lastNam" /><br><br>
    <input type="submit" value="Change Name" class="namechange" id="changeNameBtn" />

    <br>

  </div>
</div>

var editNameBox = document.getElementById('editName');
var editNameBtn = document.getElementById("editNameButton");
var closeEditName = document.getElementsByClassName("closeEditName")[0];
editNameBtn.onclick = function() {
  editNameBox.style.display = "block";
}
closeEditName.onclick = function() {
  editNameBox.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == editNameBox) {
    editNameBox.style.display = "none";
  }
}
$(document).ready(function(editname) {
  $(document).ajaxStart(function() {
    $("#contentLoad").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#contentLoad").css("display", "none");
  });
  $(document).on("click", "#nameChangeBtn", function() {
    var userid = $(".userid").val();
    var firstname = $("#firstNam").val();
    var secondname = $("#lastNam").val();
    $.ajax({
      url: "editProfile.php";
      type: "POST";
      dataType: "json";
      data: {
        userid: userid,
        firstname: firstname,
        lastname: lastname
      };
      success: function(response) {
        alert($editstatus);
      };
    });
  }));
});

editProfile.php具有以下代码：

<?php
require_once'user.php'; 
$user = new user();
if (!empty($_POST ['userid']) && !empty($_POST['firstname']) && !empty($_POST['lastname'])){
$userid = $_POST ['userid'];
$firstname = $_POST ['firstname'];
$lastname = $_POST ['lastname'];
$prevCon ['where'] = array('id' => $userid);
$prevCon ['return_type'] = 'single';
$prevUser = $user -> getRows($prevCon);
  if (!empty ($prevUser)){
      $conditions = array ( 'id' => $userid);
      $data = array ('first_name' => $firstname, 'last_name' => $lastname);
      $update = $user -> update ($data, $conditions);
  }
  if ($update){
      $editstatus = "Name Changed Successfully";
  } 
  else {
      $editstatus = "Failed to change your name, please try again.";
  }
}
else {
$editstatus = "First Name & Last Name fields can't be empty!";
}


echo json_encode ($editstatus);

?>

最后我的html代码像这样，

<button id="editNameButton"><i class="fa fa-2x fa-pencil"></i></button></p>
    </p>
<div id="editName" class="editname">
  <div class="editname-content">
  <div class="contentloader" id="contentLoad"><img src="loaders/ripple-loading.gif" height = "100px" width = "100px" alt="Loader" /><br>
    <strong>Loading... </strong></div>
    <span class="closeEditName">&times;</span>
    <p class="center"><strong>Edit Your Name</strong><br><hr></p>
<br><br>
     <label><strong>First Name:</strong></label><br>
    <input type="name" placeholder="<?php echo ' '. $userData['first_name'] ?>" class="firstname" id = "firstNam" /><br><br>
    <label><strong>Last Name:</strong></label><br>
    <input type="name" placeholder="<?php echo ' '. $userData['last_name'] ?> "class="secondname" id = "lastNam" /><br><br>
    <input type="submit" value = "Change Name" class ="namechange" id="changeNameBtn" />

<br>

 </div>
</div>

Loader隐藏在CSS文件中。当我使用此脚本时，什么都没有发生！帮助将不胜感激！

Answer 1

我修复了语法错误，迁移为对ajax使用promise语法，对事件处理程序使用了jQuery代码。

注意：我不知道您在$(".userid").val()的位置，所以我将把解决方法留给您。

// since you have jQuery, I use that.
$("#editNameButton").on('click', function() {
  $('#editName').removeClass('hideme');
});
$(".closeEditName").on('click', function() {
  $('#editName').addClass('hideme');
});
$('#editName').on('click', function() {
  $(this).addClass('hideme');
});
// no need for window event, covered by prior one
$(function() {
  $(document).ajaxStart(function() {
    $("#contentLoad").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#contentLoad").css("display", "none");
  });
  $(document).on("click", "#nameChangeBtn", function() {
    var userData = {
      userid: $(".userid").val(),
      firstname: $("#firstNam").val(),
      secondname: $("#lastNam").val()
    };
    $.ajax({
        url: "editProfile.php",
        type: "POST",
        dataType: "json",
        data: userData
      })
      .done(function(response) {
        alert($editstatus);
      });
  });
});

.hideme {
  display: none;
}

.contentloader img {
  height: 100px;
  width: 100px
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<p> <button id="editNameButton"><i class="fa fa-2x fa-pencil"></i></button></p>
<p></p>
<div id="editName" class="editname">
  <div class="editname-content">
    <div class="contentloader" id="contentLoad"><img src="loaders/ripple-loading.gif" alt="Loader" /><br />
      <strong>Loading... </strong>
    </div>
    <span class="closeEditName">&times;</span>
    <p class="center"><strong>Edit Your Name</strong><br />
      <hr />
    </p>
    <br/><br/>
    <label><strong>First Name:</strong></label><br />
    <input type="name" placeholder="<?php echo ' '. $userData['first_name'] ?>" class="firstname" id="firstNam" /><br/><br/>
    <label><strong>Last Name:</strong></label><br/>
    <input type="name" placeholder="<?php echo ' '. $userData['last_name'] ?> " class="secondname" id="lastNam" /><br/><br/>
    <input type="submit" value="Change Name" class="namechange" id="changeNameBtn" />
    <br/>
  </div>
</div>

Answer 2

我会这样做：

<input type="hidden" name="userid" id="userid" value="<?php echo $userData['id']; ?>"> // put this in your form to

$(".namechange").on("click", function() {
  //show loader
  $("#contentload").css("display", "block");

  // get data
  var userid = $("#userid").val();
  var firstname = $("#firstNam").val(); 
  var secondname = $("#lastNam").val();

  // make ajax call
  $.ajax ({
     url  : "editProfile.php";
     type : "POST";
     dataType : "json";
     data : {userid : userid, firstname : firstname, lastname : lastname};
     success : function (response){
        alert(response);

        // hide loader
        $("#contentload").css("display", "none");
     };
  });
)};

注意：：您不能使用$ editstatus，这只是您的php变量。但是您通过json_encoding并回显了它，但是却得到了正确的答案

但是，如果您想完全控制状态，则应该对这样的数组进行json编码：

echo json_encode(array("status" => "success", "message" => "Name changed successfully")); 

以此类推，然后使用

检查您的ajax成功功能中的状态

if(response.status == "success") { 
   // do whatever
} else {
   // do whatever
}