一个页面多个表单字段相同情况下，Ajax提交分别获取对应表单字段信息

最新推荐文章于 2024-10-01 13:22:20 发布

原创最新推荐文章于 2024-10-01 13:22:20 发布 · 573 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery #Ajax

前端HTML页面同时被 2 个专栏收录

4 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

在页面包含多个相同表单字段的情况下，通过为每个表单添加独特类或ID，利用jQuery的选择器功能，可以方便地通过$('.fapiao_form1').serialize()方法获取对应表单的字段信息。随后，这些信息可以通过Ajax异步提交到后台控制器进行处理。

//打印
$('.yulan_alert_print').click(function(){
   $('.yulan_alert').hide();
   var lx=$(this).attr("lx");  
   if(lx=="z"){
      $('.fapiao_z_queren').show(); 
      $.ajax({
             url:'/kaipiao/fapiao',
             type:'POST',
             data: $(".fapiao_form2").serialize(),
             dataType: 'json',
             headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
             success: function(data) {
            } //success end
         }); //ajax   end   
  
    $('.fapiao_z_queren').show();  
   }else if(lx=="p_hz"){

      $('.fapiao_pu_queren').show();  
   }else if(lx=="p"){
      $.ajax({
             url:'/kaipiao/fapiao',
             type:'POST',
             data: $(".fapiao_form1").serialize(),
             dataType: 'json',
             headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
             success: function(data) {
            } //success end
         }); //ajax   end       
      $('.fapiao_pu_queren').show();
   }      

  
})

备注：

1.给表单分别添加类或id属性以作区分；

2.对于表单字段较多时使用$(".fapiao_form1").serialize()；获取字段信息较为快捷；

控制器抓取方法：

public function chushi(Request $request)
{
    config(['app.debug' => true]);
    $uid=Auth::id();
    if($uid){
    //查询基本信息
    $get = Kaipiao_chushi::where('uid', $uid)->first();
    $canshu = Kaipiao_xt::where('uid', $uid)->first();
    //接受系统基本信息设置
    if ($request->isMethod('post')) {
        unset($data);
        $data["uid"]=$uid;
        $data["manage_name"] = request('manage_name');//营业地址
        $data["password"] = request('password');  //密码
        $data["my_dizhi"] = request('my_dizhi');//银行
        $data["my_tel"] = request('my_tel');//银行
        $data["bank_zhanghao"] = request('bank_zhanghao');//银行

        $data2["uid"]=$uid;
        $data2["dizhi"] = request('manage_name');//营业地址
        $data2["tel"] = request('my_tel');  //电话号码
        $data2["bank"] = request('bank_zhanghao');//银行