个人中心
gpt4 book ai didi

javascript - 在 PHP 中使用 Ajax 向数据库中插入数据

转载 作者：行者123 更新时间：2023-11-30 20:16:51 24 4
gpt4 key购买 nike

我想使用 Ajax 在数据库中插入数据，但遇到错误:

Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105)

错误页面的屏幕截图。

Screen shot of error page

在 Modal.php 文件中包含我的 html 和 js。

我的Modal.php文件

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
    $("#myModal").modal();

  function insertData(){
    //$("#signup").click(function(){
    var Fname = $("#Fname").val(); debugger;
    var Lname = $("#Lname").val();
    var age =   $("#age").val();
    var email = $("#email").val();
    var password =  $("#password").val();

  // AJAX code to send data to php file.
  $.ajax({
            type: "POST",
            url: "Insert.php",
            data: {Fname:Fname,Lname:Lname,age:age,email:email,password:password},
            dataType: "JSON",
            success: function(data) {

                alert(data.message);

            },
            error:function(err){
                console.log(err.responseText);
            }
        });
        //});
  }
    });
});

</script>

</head>
<body>

<div class="container">
  <h2>Modal Sign Up Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Sign Up</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Sign Up</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">

          <form role="form" action="">
            <div class="form-group">
              <label for="Fname"><span class="glyphicon glyphicon-user"></span> First Name</label>
              <input type="text" class="form-control" id="Fname" placeholder="First Name">
            </div>

            <div class="form-group">
              <label for="Lname"><span class="glyphicon glyphicon-user"></span> Last Name</label>
              <input type="text" class="form-control" id="Lname" placeholder="Last Name">
            </div>

            <div class="form-group">
              <label for="age"><span class="glyphicon glyphicon-user"></span> Age</label>
              <input type="number" class="form-control" id="age" placeholder="Enter Age">
            </div>

            <div class="form-group">
              <label for="email"><span class="glyphicon glyphicon-eye-open">  </span> Email</label>
              <input type="email" class="form-control" id="email" placeholder="Enter Email">
            </div>



            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"> </span>  Password</label>
              <input type="text" class="form-control" id="password" placeholder="Enter password">
            </div>
            <!--<div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>-->
              <input type="button" id="signup" onclick="insertData()" class="btn btn-success btn-block" value="Sign Up"/>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p><a href="#">Log In</a></p>
          <!--<p><a href="#">Password?</a></p>-->
        </div>
      </div>

    </div>
  </div> 
</div>
</body>
</html>

这是我的 Insert.php 文件。在 Insert.php 文件中，我编写了与在数据库中插入数据相关的所有 PHP 代码。

<?php
include("connection.php");

//if(isset($_POST['submit']))
      //  {

    $Fname=$_POST["Fname"];
    $Lname=$_POST["Lname"];
    $Age=$_POST["age"];
    $EmailId=$_POST["email"];
    $Password=$_POST["password"];

$Insert = "INSERT INTO simpleform (First_Name, Last_Name, Age, Email_Id, Password) VALUES ('".$Fname."', ".$Lname."', '".$Age."', '".$EmailId."', '".$Password."')";
$Query=mysqli_query($con, $Insert);

//print_r($Insert);


if(!$Query) 
        {
            echo mysqli_error();
            $successArr = array('status'=>'false','message'=>'Data not inserted');
            $successJson = json_encode($successArr);
        }
    else
    {
        $successArr = array('status'=>'true','message'=>'Data inserted successfully');
        $successJson = json_encode($successArr);

        //echo "Successfully Inserted";

    }
    echo $successJson;
    //  }

    header('Location: http://localhost/javascript/Modal.php');
    ?>

最佳答案

将您的 insertData() javascript 函数置于 id #myBtn 的点击事件以及 document.ready 函数之外。因为它在点击事件中，代码无法找到您的函数 insertData()；

你的脚本应该是这样的——

function insertData(){
    //$("#signup").click(function(){
    var Fname = $("#Fname").val(); debugger;
    var Lname = $("#Lname").val();
    var age =   $("#age").val();
    var email = $("#email").val();
    var password =  $("#password").val();

  // AJAX code to send data to php file.
  $.ajax({
            type: "POST",
            url: "Insert.php",
            data: {Fname:Fname,Lname:Lname,age:age,email:email,password:password},
            dataType: "JSON",
            success: function(data) {

                alert(data.message);

            },
            error:function(err){
                console.log(err.responseText);
            }
        });
        //});
  }
  
  
  $(document).ready(function(){
    $("#myBtn").click(function(){
    $("#myModal").modal();
    });
});

关于javascript - 在 PHP 中使用 Ajax 向数据库中插入数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51841804/

24 4 0
文章推荐： 不使用数组将十进制转换为二进制
文章推荐： c - c 中 while() 循环的不明确行为
文章推荐： c - MPLAB XC8编译器错误:"no identifier in declaration "
文章推荐： c - 即使对于大量数据作为输入，我如何使该代码也能工作？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com