如何在不重页的情况下将信息发送到数据库？

Question

所以，我试图用AJAX / PHP向数据库发送一些信息，但没有成功，我已经看到了一些代码，但它们不起作用，我只是得到这个错误TypeError：'stepUp'调用一个对象做没有实现接口HTMLInputElement。

HTML

<form action="javascript:void;" id="putz" class="putz" method="POST" onsubmit="send()" enctype="multipart/form-data" > 
              <div class="box">
                <input type="text" name="name" id="name" required>
                <label>Name</label>
              </div>
              <div class="box">
                <input type="text" name="email" id="email" required>
                <label>Email</label>
              </div>
              <div class="box">
                <input type="text" name="pass" id="pass" required>
                <label>Password</label>
              </div>
              <div class="Box">
                <p style="color: red; text-align: left; margin-left: 15px">Photo</p>
                <input type="file" name="photo" style="margin-right: 140px; color: red;">
              </div>
              <button id="submit" type="submit">Submit</button>
            </form>

这是我的ajax / javascript

</script>
  <script type="text/javascript">
     function send()
{
 var name=document.getElementById( "name" );
 var email=document.getElementById( "email" );
 var pass=document.getElementById( "pass" );
  $.ajax({
    type: 'post',
    url: 'send.php',
    data: {
      name:name,
      email:email,
      pass:pass,
    },
  });
}       
    </script>

和send.php代码

 <?php 
    include_once('conn.php');
    $name = $_POST['name'];
    $email = $_POST['email'];
    $pass = $_POST['pass'];
    $photo = $_FILES['photo']['name'];
    $tmp_name = $_FILES['photo']['tmp_name'];
    move_uploaded_file($tmp_name, "img/foto_perfil/" . $photo);
    $sql = "INSERT INTO user (name, email, photo, pass) VALUES ('$name', '$email','$photo', '$pass')";
    mysqli_query($conn, $

Answer 1

• 在调用$.ajax()之前，您没有引用JQuery库。
• 您应该将实际的HTML元素称为要传递这些元素的值时要传递的数据。
• 在data对象中的最后一个键/值对之后以及data键本身之后，您还有尾随逗号。
• 我还会重命名你命名为name的任何/所有内容，因为这会导致与全球window.name属性发生冲突。
• （仅供参考）您没有正确使用label元素。你要么将它包装在它作为标签的表单元素周围，要么给它一个for属性，其值为表单元素的id，它是一个标签。

---

function send() {
  // Get the values of the elements, not the elements themselves:
  var userName = document.getElementById( "userName" ).value;
  var email = document.getElementById( "email" ).value;
  var pass = document.getElementById( "pass" ).value;

  $.ajax({
    type: 'post',
    url: 'send.php',
    data: {
      userName: userName,
      email: email,
      pass: pass
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="putz" class="putz" 
      method="POST" onsubmit="send()" enctype="multipart/form-data" > 
  <div class="box">
    <input type="text" name="userName" id="userName" required>
    <label for="userName">Name</label>
  </div>
  <div class="box">
    <input type="text" name="email" id="email" required>
    <label for="email">Email</label>
  </div>
  <div class="box">
    <input type="text" name="pass" id="pass" required>
    <label for="pass">Password</label>
  </div>
  <div class="Box">
    <p style="color: red; text-align: left; margin-left: 15px">Photo</p>
    <input type="file" name="photo" style="margin-right: 140px; color: red;">
  </div>
  <button id="submit" type="submit">Submit</button>
</form>