weixin_33725272 2020-04-02 20:50 采纳率: 0%
浏览 38

N00b的AJAX表单示例

I will begin with an apology: I'm bad with AJAX. I'm trying to learn, but this particular project is giving me an absolute headache. I've read through a lot of examples, but can't find anything that helps with this issue.

PROBLEM: Using an "old-fashioned" PHP/MySQL/HTML environment, I'm trying to send data from a simple HTML form using AJAX; send the ajax request to php for updating a record in a MySQL db. Unfortunately, my code just does not work. It seems that I am effectively sending data, but somewhere in all of this I am coming up short. NOTE: I've confirmed that there is no problem with my Database connection, I use "$db" when inputting my name, password, db_name as indicated in my "show_client.php" file.

MY GOAL: I'm hoping to: (a) Update the existing variable using this AJAX request (no refresh of page); AND (b) Display output in the div titled "case_activity_id2" after the form database row is updated and my ajax request has been submitted.

I have two relevant files: (1) index.php; and (2) show_client.php.

index.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);  

?>
  • 写回答

1条回答 默认 最新

  • weixin_33724059 2020-04-02 23:30
    关注

    Pretty simple once @el_vanja helped me out! Thank you so much!

    $(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);
                  }
               });
            });
        });
    
    评论

报告相同问题?

悬赏问题

  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 高德地图点聚合中Marker的位置无法实时更新
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错