php / 程序源码

php直接输出post/get前端表单&json异步提交

染卷 2020年4月21日 3 分钟

更新：如需要使用php进行服务器后端直接提交表单的，请移步：
php使用3种post/get方式进行后端提交表单（含json数据）

最近项目中有用到登录第三方web平台集成，里面有个小需求是可以在内部服务器上直接post/get提交相关参数到第三方服务器进行web登录。故用php做了一个简单的表单生成函数，post及get提交使用常规html表单方式提交，提交后会跳转到目标url地址。但是提交contentType:’application/json’头数据只能使用ajax异步提交，且只能获取到返回值，不能提交后直接跳转到目标地址，这种提交方式一般前后端分离服务器用的比较多一点。

 1<?php  
 2$url='post.php';
 3$parms=array("username"=>"admin","password"=>"123456");
 4$model='post';
 5$usejson =0;//为1时 只能调用ajax提交并获取返回值，为0时使用普通html表单提交
 6createForm($url,$parms,$model,$usejson);
 7 
 8function createForm($url,$parms,$model,$usejson=0){
 9        echo '<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>';
10        echo '<form action="'.$url.'" name="form1" id="form1" method="'.$model.'"  >';
11 
12        foreach($parms as $key =>$value){
13  
14            echo '<br>'.$key.'<input type="text" name="'.$key.'" value="'.$value.'">';
15        }
16 
17        echo '<br><input type="hidden" id="model" value="'.$usejson.'">';
18        echo '<br><input type="button" onclick="sub();" value="登录系统">';
19        echo '</form>';
20        echo '<script>function sub(){
21            var mo = document.getElementById(\'model\').value;
22            if(mo != 1){            
23            document.form1.submit();
24            }else{
25 
26            //读取表单数据并数组化---最终转换为json字符串
27               var formArray = $("#form1").serializeArray();
28               var dataArray = {};
29               $.each(formArray,function(){
30                 if(dataArray[this.name]){
31                   if(!dataArray[this.name].push){
32                     dataArray[this.name] = [dataArray[this.name]];
33                   }
34                   dataArray[this.name].push(this.value || \'\');
35                 }else{
36                   dataArray[this.name] = this.value || \'\';
37                 }
38               });
39               var data = JSON.stringify(dataArray);//转换成string数据，以便后台接收
40             ////json字符串转换结束，用于下面ajax提交数据
41 
42               alert(data);
43                $.ajax({
44                    type: \''.$model.'\',
45                    contentType:\'application/json\',
46                    url: \''.$url.'\',
47                    data: data,
48                    success: function(data) {
49                      alert(JSON.stringify(data));
50                      console.log(data);
51                      if(data.hasOwnProperty("url")){  
52                        console.log(data["url"]);
53                        window.location.href= data["url"];//json中如有url键则跳转至该url
54                        }else{
55                            alert(\'返回数据无url地址\');
56                        }
57                    },
58                    error:function(){ alert(\'发生错误\');}
59                  });
60            }
61            }
62             //   sub();
63                </script>';
64 
65    }
66 
67?>

上述代码中有用到将form表单直接格式化为json数据的操作方法。代码提取后可封装为js函数，此处仅单独截取实现代码。

 1			//读取表单数据并数组化---最终转换为json字符串
 2               var formArray = $("#form1").serializeArray();
 3               var dataArray = {};
 4               $.each(formArray,function(){
 5                 if(dataArray[this.name]){
 6                   if(!dataArray[this.name].push){
 7                     dataArray[this.name] = [dataArray[this.name]];
 8                   }
 9                   dataArray[this.name].push(this.value || \'\');
10                 }else{
11                   dataArray[this.name] = this.value || \'\';
12                 }
13               });
14               var data = JSON.stringify(dataArray);//转换成string数据，以便后台接收
15			//json字符串转换结束，用于下面ajax提交

染卷

本站文章也会定期同步到微信公众号，可以关注下避免错过~

建站 12年 1天

微信公众号

发表评论取消回复