个人中心
gpt4 book ai didi

javascript - 如何使用PHP ajax在Modal Box中提交HTML表单数据？

转载 作者：行者123 更新时间：2023-11-28 03:17:45 32 4
gpt4 key购买 nike

我想使用 PHP 和 Ajax 在数据库中的 state mysql 表 中添加 state 名称，但模式框未提交信息。我在模型框中发布了单按钮提交的所有代码，如下所示:

我的目录结构是:

Directory structure

Server files

test.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="./model.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"> 
    </script>
</head>
<body>
    <button id="add_state">Add State</button>

     <div>
      <?php                                            


         include('server/connection.php');

         $sqlSelect="SELECT * FROM tbl_state_info ORDER By StateName ASC";
         $result = $conn -> query ($sqlSelect);                                           
         $result = $conn -> query ($sqlSelect);                                          
         echo "<select name='StateName'>";
         echo "<option>select</option>";                                            
         while ($row = mysqli_fetch_array($result)) {
         echo "<option value=$row[StateName]> $row[StateName] </option>";
         }
         echo "</select>";
      ?>     


     </div>

    <div id="add_state_model" class="add_state_model">
        <div class="add_state_model_content">
            <span class="state_model_close">&times;</span>
            <form id="state_submit_form" method="post" action="">
                <label>Enter State:</label>
                <input type="text" name="state">
                    <input type="submit" name="state_submit">
                    </form>
                    <div class="message_box" style="margin-left: 60px;"></div>
                </div>
            </div>
            <script src="./model.js"></script>
        </body>
    </html>

对于后端，我使用 javascript 和 PHP

model.js


var add_state_model = document.getElementById('add_state_model');
var add_state_button = document.getElementById('add_state');
var add_state_span = document.getElementsByClassName('state_model_close')[0];

add_state_button.onclick = function(){
    add_state_model.style.display = "block";
}

add_state_span.onclick = function(){
    add_state_model.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == add_state_model) {
    add_state_model.style.display = "none";
  }
}


$(document).ready(function(){

  var delay = 1000;

$('[name="state_submit"]').click(function(e){

           e.preventDefault();


           var state = $('#state_submit_form').find('[name="state"]').val();

           if(state === ''){
            $('.message_box').html(
                '<p><span style="color:red;">Please enter state name!</span></p>'
                );
            $('[name="state"]').focus();
            return false;
           }          

           console.log(state);    


          $.ajax({
                type: "POST",                       
                url: "server/addstate.php",
                data: {"state":state},
                beforeSend: function() {
                    $('.message_box').html(
                    '<img src="./tenor.gif" width="40" height="40"/>'
                    );
                }, 
                success: function(data)
                {
                    setTimeout(function() {
                    $('.message_box').html(data);
                    }, 1000);
                }
          });  
    });

});


还有服务器页面addstate.php

<?php

if ( ($_POST['state']!="") ){

$state = $_POST['state'];

include('connection.php');

/* check connection */
if ($conn->connect_errno) {
    printf("Connect failed: %s\n", $conn->connect_error);
    exit();
}

//insert query for registration
$insertSql = "INSERT INTO `tbl_state_info`(`StateName`) VALUES ('$state')";

if ($conn->query($insertSql) === TRUE) {

    echo "<span style='color:green;'>
     <p>State added to dropdown</p>
     </span>";     

    }else{        
        printf("Error: %s\n", $conn->error);        
    }  
}

?>

和connection.php文件

<?php

    // set the timezone first
    if(function_exists('date_default_timezone_set')) {
        date_default_timezone_set("Asia/Kolkata");
    }

    $conn = new mysqli('localhost', 'root', '');

    //check connection
    if($conn->connect_error){
        die("Connection Failed".$conn->connect_error);
    }

    //connect database
    mysqli_select_db($conn, 'crm');
?>

和css文件model.css，它用于弹出模型框


.add_state_model {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.add_state_model_content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 30%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.state_model_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.state_model_close:hover,
.state_model_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

我收到以下错误:

Error

最佳答案

如果我没有错，请纠正我

您可以访问此网址，这将帮助您解决问题How to solve 'Redirect has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?

或者尝试更改 URL 路径我已经尝试过了，它对我有用

 url: "http://localhost/CRM/server/addstate.php", 
    to
    url: "server/addstate.php"

enter image description here如果有任何帮助请随时问我

关于javascript - 如何使用PHP ajax在Modal Box中提交HTML表单数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59484738/

32 4 0
文章推荐： javascript - <input type ='file'> 提供 URL 编码的文件名，导致 FileReader 在 Android native 浏览器上出现 File Not Found 错误
文章推荐： c++ - 如何创建一个节点类，该节点类带有指向我可以设为 null 的父节点的指针
文章推荐： javascript - Bootstrap 3 - 删除小型设备上的填充/边距
文章推荐： c++ - 如何在 C++ 函数模板中指定默认的非模板参数初始值设定项？
行者123
个人简介

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

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