如何在不重新加载页面的情况下将信息发送到数据库?

时间:2019-03-01 01:57:22

标签: javascript php ajax database mysqli

所以,我试图用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, $

1 个答案:

答案 0 :(得分:0)

  • 您之前没有引用过JQuery库 调用$.ajax()
  • 您将实际的HTML元素称为要传递的数据 什么时候应该传递这些元素的值。
  • 在您的最后一个键/值对之后,您还会有结尾的逗号 data对象和data键本身之后。
  • 我还将重命名您命名为name的所有内容 导致与全局window.name属性冲突。
  • (FYI)您没有正确使用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>