如何在我的代码中修复针对移动浏览器的Ajax请求/响应

时间:2019-01-23 15:34:17

标签: javascript jquery ajax

code shown in picture此代码在台式机浏览器中完美运行,但对于移动浏览器,直接重定向到url位置,在我下面的代码中不起作用...单击提交按钮,将输入数据发送到process-data.php通过submit-data.js和显示为跨度的响应

 **form.php**                           
<script  src="https://code.jquery.com/jquery-1.6.4.js"></script>    
<script src="js/form/submit-data.js"></script>    

<form id="feed_<?php echo$type_id;?>" action="include/process_data.php" method="post">    
<input type="hidden" name="cmd_<?php echo$type_id;?>" value="<?php echo$type_id; ?>">    
<input type="hidden" name="item_<?php echo$type_id;?>" value="<?php echo $type_name;?>">    
<input type="hidden" name="amount_<?php echo$type_id;?>" value="<?php echo $ac_p;?>">    
<input type="submit" class="fa fa-chevron-down" value="Submit">    
</form>    
<span id="dFcn_<?php echo$type_id;?>"></span>    

submit-data.js

//submit-data.js        
$(document).ready(function() {    

    $('form').submit(function(event) {    
    var charid = this.id;    
    var idsplit = charid.split('_');    
    var getid = idsplit[1];    
    var cmsd=$('input[name=cmd_'+getid+']').val();    

    $('.form-group').removeClass('has-error'); // remove the error class    
    $('.help-block').remove(); // remove the error text    
    // get the form data    
    var formData = {    
        'cmd'               : $('input[name=cmd_'+getid+']').val(),    
        'item'          : $('input[name=item_'+getid+']').val(),    
        'amount'    : $('input[name=amount_'+getid+']').val()    
    };    
    $.ajax({    
        type        : 'POST',    
        url         : 'include/process_data.php',    
        data        : formData,    
        dataType    : 'json',    
        encode      : true    
    })    
    .done(function(data) {    
        //console.log(data);     

        if ( ! data.success) {    
            // errors message    
            $('#dFcn_'+cmsd+'').append('<div class="alert alert-success">' + data.message + '</div>');    
        } else {    
            //success message!    
            $('#dFcn_'+cmsd+'').append('<div class="alert alert-success">' + data.message + '</div>');    
        }    
    })    

    //stop refreshing the page    
        event.preventDefault();    
    });    

});    

process_data.php

  <?php    
//array    
$data= array();    

if (empty($_POST['cmd']) && empty($_POST['item']) && empty($_POST['amount']))    
    $POST_DATA_FALIURE = 'POST DATA FALIURE';    

if ( ! empty($POST_DATA_FALIURE)) {    
    $data['success'] = false;    
    $data['errors']  = $POST_DATA_FALIURE;    
} else {    
    $data['success'] = true;    
    $data['message'] = 'SUCCESS MESSAGE';    
}    
echo json_encode($data);    
?>    

1 个答案:

答案 0 :(得分:0)

实际上,表格在表“ td”标签中,并且在同一页面中有太多js冲突, 删除了外部链接的js(如下所示)后,这在跨浏览器中对我有用。
[注意:]但是,通过这种技术,我们可以在while循环中生成多个表单并发送多个表单数据,并通过ajax获取每个表单提交的响应,而无需重新加载页面。谢谢。

[these js was linked for making table responsive,data search type]    
DataTables 1.10.19    
Bootstrap integration for DataTables' Responsive    
Responsive 2.2.3    
FixedHeader 3.1.5    
DataTables Bootstrap 3 integration