时间戳

首页 > 解决方案 > N00b 的 AJAX 表单示例

php - N00b 的 AJAX 表单示例

问题描述

我将首先道歉：我对 AJAX 不满意。我正在努力学习，但这个特殊的项目让我非常头疼。我已经阅读了很多示例，但找不到任何有助于解决此问题的内容。

问题：使用“老式”PHP/MySQL/HTML 环境，我正在尝试使用 AJAX 从简单的 HTML 表单发送数据；将 ajax 请求发送到 php 以更新 MySQL 数据库中的记录。不幸的是，我的代码不起作用。似乎我正在有效地发送数据，但在所有这些中的某个地方我都做不到。 注意：我已经确认我的数据库连接没有问题，我在输入我的姓名、密码、db_name 时使用了“$db”，如“show_client.php”文件中所示。

我的目标：我希望： (a) 使用此 AJAX 请求更新现有变量（不刷新页面）；AND (b) 在表单数据库行更新并提交我的 ajax 请求后，在名为“case_activity_id2”的 div 中显示输出。

我有两个相关文件：（1）index.php；(2) show_client.php。

索引.php

<html>
  <td>
        <form id= "ajaxForm" action = ""  method = "POST" >
            <input type = "hidden" name='case_activity_id' id = 'case_activity_id' value = '<?php echo $case_activity_id?>'>
            <select name ='show_client_id' id = 'show_client_id' class="form-control">
                    <?php 
                        showClient();
                    ?> 
            </select>

  </td>
  <td><input type="submit" value="send" id = "btnClick" class="btn btn-primary" /> </form></td>
  <td><div id = "case_activity_id2"></div></td>

<script>

(function(){
    $("#btnClick").on("click", function(){ submitForm();});
})();
function submitForm(){
    $(document).ready(function() {
        $("#ajaxForm").submit(function(event){
            var case_activity_id = $("#case_activity_id").val();
            var show_client_id = $("#show_client_id").val();
           $.ajax( {
              type: "POST",
              url:'show_client.php',
              dataType: 'json',
              data: {
                    case_activity_id:case_activity_id, 
                    show_client_id:show_client_id
                    },
              success:function(data) {
                $('#case_activity_id2').html(data);
                console.log(data);
              }
           });
        });
    });
}
</script>
</html>

(2) show_client.php

<?php
session_start(); 
require 'db/connect.php';

            $show_client_id = $_POST['show_client_id']; 
            $case_activity_id = $_POST['case_activity_id']; 

            $sql = "UPDATE case_activity
                    SET show_client_id = '$show_client_id'
                    WHERE case_activity_id = '$case_activity_id'";  
            mysqli_query($db, $sql);  

?>

标签： phpjqueryajax

解决方案

一旦@el_vanja 帮助了我，就非常简单！太感谢了！

$(document).ready(function() {
        $("#ajaxForm").submit(function(event)
        {
            event.preventDefault();
            var case_activity_id = $("#case_activity_id").val();
            var show_client_id = $("#show_client_id").val();
           $.ajax( {
              type: "POST",
              url:'show_client.php',
              dataType: 'json',
              data:
                    {
                        case_activity_id:case_activity_id, 
                        show_client_id:show_client_id
                    }, 
              success:function(data) {
               // $('#case_activity_id2').html(data);
                console.log(data);
              }
           });
        });
    });

推荐阅读