2021年正确的ajax方法发布来自php的表单数据答案

【问题标题】：in 2021 proper methods of ajax posting a form data coming from php2021年正确的ajax方法发布来自php的表单数据
【发布时间】：2021-04-09 23:26:19
【问题描述】：

我已经看到了一些可以追溯到 2011 年左右的方法，以便通过 ajax.jquery 获取表单并发布其数据。尽管使用了preventdefault functions，但我已经尝试了几次并且只是让页面重新加载。从我读到的内容告诉他们使用 jQuery 的东西是不对的，但我不确定是什么。我正在尝试从我的表单中获取数据，让 jQuery 通过定位实际表单 ID 来监听表单提交，然后调用 PHP 函数以便将该数据发布到数据库。最终除了页面重新加载之外什么都没有发生

形式：

<form action="" method="post" id="ajax-add-to-form" autocomplete="off">
    <input type="text" id="FName" name="FName" placeholder="First Name" value="" required>
    <input type="text" id="LName" name="LName" placeholder="Last Name" value="" required>
    <select id="size" required>
        <option value="">Size</option>
        <?php  for($i=1; $i<=15; $i++){?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
        <?php } ?>
    </select>
    <input type="text" id="MobileNumber" name="MobileNumber" placeholder="Phone Number" value="" required>
    <input type="email" id="Customer_Email" name="Customer_Email" placeholder="Email Address" value="" required>
    <input type="submit"  name="ajax-add-to-form" value="Add to">
</form>
the jquery

        jQuery('document').ready( function(){
            jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault();
                        jQuery('#jx-loading').show();
                            jQuery.ajax({
                                                        type: 'post',
                                                        url: my_ajax.ajax_url,
                                                        data: { 
                                                        action: 'ajax-php-function'},
                                                        success: function(data)
                                {jQuery('#jx-loading').hide();}
                                                                            
                                                                })          
                    
    
    }); 
        return false;       
        });

php

function ajax-php-function() {          
    global $wpdb;   
    $table = "mytablename";     
    $FName= $_POST['FName'];    
    $LName= $_POST['LName'];    
    $MobileNumber= $_POST['MobileNumber'];  
    $Email = $_POST['Email '];          
    $data = array(
    'FName' => $FName,
    'LName' => $LName,      
    'MobileNumber' => $MobileNumber,        
    'Email' => $Email);     
    $success = $wpdb->insert( $table, $data );          
    if($success)
    {echo json_encode($last_data);} 
    else{       echo 'error';   }   die;            
}

【问题讨论】：

最好把 preventDefault() 作为提交函数的第一行。除此之外......您在浏览器的控制台中是否有任何错误？你的细节有点模糊，至少可以说
附言。如果你不想使用 jQuery，你可以使用 fetch() 代替，它不需要任何外部库。近几年所有浏览器都内置了它（IE11除外）
附言。您是否意识到您实际上并没有通过 Ajax 请求提交任何数据？您提交了动作名称，但没有提交表单数据。查看 jQuery 的 serialize() 函数
你可以看一下我的回答中的js部分来了解一下stackoverflow.com/questions/44087779/…
@adyson 没有错误，但自从页面刷新后谁知道。我确实知道我不是通过 Ajax 提交数据，这是 PHP 操作的用途，至少据我了解。 .我当然不想序列化数据，但需要在其各个列中使用它。我确实将preventdefault 移到了最顶部，没有任何变化。

标签： php html jquery ajax forms

【解决方案1】：

由于这使用了 Wordpress，最终表单及其旧处理程序被网站中的其他一些元素丢弃。可能是 WP 或少数几个我无法删除的插件之一，因为它是页面构建器（Elementor、Elementor Essentials）。在禁用所有其他插件后，它会缩小到那个范围。代码解决方案是： ....

jQuery(document).on('submit', '#ajax-add-to-waitlist-form', function(e){
  e.preventDefault();

.......

代替

jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault();

【讨论】：