layui中使用ajax请求后端

post

复制代码
 1 html:
 2 
 3 <form class="layui-form" action="" lay-filter="form-group">
 4         <div class="layui-form-item">
 5           <div class="layui-inline">
 6             <label class="layui-form-label">xxx</label>
 7             <div class="layui-input-inline">
 8               <input type="xxx" name="xxx"  class="layui-input">
 9             </div>
10           </div>
11         </div>
12 
13         <div class="layui-form-item">
14           <label class="layui-form-label">xxxx</label>
15           <div class="layui-input-block">
16             <input type="radio" name="111" value="111" title="111" checked="">
17             <input type="radio" name="222" value="222" title="222">
18           </div>
19         </div>
20         <div class="layui-form-item">
21           <div class="layui-input-block">
22             <button class="layui-btn" lay-submit="" lay-filter="form-submit">提交</button>
23           </div>
24         </div>
25       </form>
26 
27 
28 
29 js:
30 
31 
32 <script>
33 form.on('submit(form-submit)', function (inputData) {
34         console.log("inputData:",inputData);
35         $.ajax({
36             url:"xxxxx",
37             data:{'xxx':xxx,'xx':xxx},
38             type:"post",
39             dataType:"json",
40         headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
41             success:function(data){
42                 console.log(data);
43                 layer.alert(JSON.stringify(data), {
44                     title: data
45                 });
46             },
47             error:function(data){
48                 layer.alert(JSON.stringify(data), {
49                     title: data
50                 });
51             }
52         });
53 </script>
View Code
复制代码

 

 

get:

将post方式改成get方式,url改成对应的地址即可

 

1 type:"get"

 

 

 

 

 

参考:https://www.cnblogs.com/zhenzi0322/articles/10951846.html

posted @   菜小鱼~  阅读(17882)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示