时间戳

首页 > 解决方案 > 从页面上的任何表单类 POST 输出到模态

javascript - 从页面上的任何表单类 POST 输出到模态

问题描述

对不起，我是 jQuery 和 Javascript 的初学者。我希望能够从具有类 ajax 的页面上的任何表单将结果放入我的模式中。我的代码在下面，但无法正常工作。目前它会在新页面而不是模式中打开帖子结果。任何人都可以阐明我的代码吗？
非常感谢

$(document).ready(function() {

   $('.ajax').click(function() {
      var that = $(this),
      url = that.attr('action'),
      type = that.attr('method'),
      data = {};

      that.find('name').each(function(index, value) {
         var that = $(this),
         name = that.attr('name'),
         value = that.val();

         data[name] = value;
      });
      console.log(value);
      // AJAX request
            $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response){
      // Add response in Modal body
      $('.modal-body').html(response);

      // Display Modal
      $('#aaModal').modal('show');
       }
    });
   });
   });

标签： javascripthtmljquery

解决方案

这可能是因为您的浏览器默认提交表单。它不知道你在做 AJAX 的东西。要防止这种情况，请使用preventDefault ()。

除此之外，jQuery 有一个用于序列化（1和2）表单数据的内置函数。

$(document).ready(function() {

   $('form.ajax').click(function(event) {
      event.preventDefault(); // prevents opening the form action url
      
      var $form = $(this),
         url = $form.attr('action'),
         type = $form.attr('method'),
         data = $form.serialize();

      
      // console.log(value); // value doesnt exist outside of your loop btw
      
      // AJAX request
      $.ajax({
         url: url,
         type: type,
         data: data,
         success: function(response){
            // Add response in Modal body
            $('.modal-body').html(response);

            // Display Modal
            $('#aaModal').modal('show');
         }
       });
   });
});

此外，如果将单击事件处理程序绑定到表单或按钮，我猜是第一个，这还不是很清楚。您应该将处理程序更改为以下内容：

$(document).ready(function() {

   $('form.ajax').on('submit', function(event) {

推荐阅读