Question

我正在研究一个客户管理系统，我目前陷入一个问题，我一直试图解决一个星期，现在已经没有了想法

我有index.php基本上它是一个简单的表单你提交客户的名字和姓氏然后ajax发送请求到functions2.php添加到数据库然后报告成功与否然后webapp_get_customers检索和更新表与新客户进入webapp_get_customers div而不刷新页面这是完美的工作

然而在get.php页面上我有一个表从表中选择结果，然后在下面添加相同的表单，以便在我在索引页面上编辑时能够编辑客户名称，它在模态中正确打开表单但是是不是没有提交表格，就像找不到ajax

所以我正在追逐的是如何让它查看webapp_get_customers div以查看表单是否已提交或我是否认为这一切都是错误的。我认为浏览器无法看到位于get.php页面的div内部的代码，它只是返回加载的内容

请帮助其非常苛刻的

<form  name='frm_details' class='frm_details' id='frm_details0' action=''>
<input type='text' class='form-control' name='cu_fname' required>
<input type='text' class='form-control' name='cu_lname' required>   
<input type='submit' value='Save' > 
</form> 

    <script>
        $(function() {
            $('form.frm_details').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    url: '/limitless/functions2.php',
                    type: 'post',
                    dataType: 'json',                       
                    data: $(this).serialize(),
                      success: function(data) {
                           if(data.status == '1')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            } 
                           if(data.status == '2')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            }                               
                        }  
                });
            });
        });
    </script>

    <script>
    function webapp_get_customers(){
       $.ajax({
       type: 'GET',
       url: '/limitless/get.php',
       dataType: 'html'
      }).done(function( data ) {
      $('#webapp_get_customers').html(data);
      });
    }   
    webapp_get_customers();
    </script>       


    <div id='webapp_get_customers'></div>

Answer 1

你只需要从函数中删除send jquery ajax函数，并以这种方式调用它：

<form  name='frm_details' class='frm_details' id='frm_details0' action=''>
    <input type='text' class='form-control' name='cu_fname' required>
    <input type='text' class='form-control' name='cu_lname' required>   
    <input type='submit' value='Save' > 
    </form> 

        <script>
            $(function() {
                $('form.frm_details').on('submit', function(event) {
                    event.preventDefault();
                    $.ajax({
                        url: '/limitless/functions2.php',
                        type: 'post',
                        dataType: 'json',                       
                        data: $(this).serialize(),
                          success: function(data) {
                               if(data.status == '1')
                                {
                                    $('#info').addClass('alert alert-danger no-border').html(data.message);
                                } 
                               if(data.status == '2')
                                {
                                    $('#info').addClass('alert alert-danger no-border').html(data.message);
                                }                               
                            }  
                    });
                });
                $.ajax({
                  type: 'GET',
                  url: '/limitless/get.php',
                  dataType: 'html',
                  success: function(data)
                  {
                     //alert(html);
                     $('#webapp_get_customers').html(data);
                  }
                });

            });
        </script>    

        <div id='webapp_get_customers'></div>

Answer 2

我建议您使用AjaxSubmit提交表单，它将为您处理表单字段的序列化。

$("#yourFormSelector").ajaxSubmit({
   type: "POST",
   url: url,
   beforeSend: function (msg) {
       //Do something before sending your request
   },
   success: function (data, status, xhr) {
       //Do something on success
   },
   error: function (xhr, status, error) {
       //Do something on success
   },
   complete: function (event, xhr, option) {
       //Do something on complete (whether it was successful or not)
   } 
});

Answer 3

首先，如果要检查提交过程，可以在chrome（或Firefox）中打开开发工具，单击网络面板。所有请求都显示在那里。其次，如果在页面加载后添加表单（或其他DOM），则不会正确添加事件侦听器。您需要再次手动绑定它。

ajax帖子没有在ajax上工作从div内部获取

3 个答案: