menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery使用Ajax请求接口提交表单和遍历表格

武飞扬头像
三线码工
帮助1人

现在大家都是使用Vue等框架去完成项目，但是前几天有个静态的网站是用jQuery和Amaze UI完成的，其中只需要对接两个接口，一个是提交客户信息，一个是查看客户提交的信息。此功能十分基础，但是也花了一个小时才搞定，jQuery基本忘光了，记录一下。

学新通

  1.  
    <form class="am-form">
  2.  
    <div class="am-g">
  3.  
    <div class="am-u-md-6">
  4.  
    <input type="text" class="" id="doc-ipt-email-1" placeholder="姓名" required>
  5.  
    </div>
  6.  
    <div class="am-u-md-6">
  7.  
    <input type="email" class="" id="doc-ipt-email-2" placeholder="Email" required>
  8.  
    </div>
  9.  
    </div>
  10.  
     
  11.  
    <div class="am-g">
  12.  
    <div class="am-u-md-6">
  13.  
    <input type="tel" class="" id="doc-ipt-email-3" placeholder="电话" required>
  14.  
    </div>
  15.  
    <div class="am-u-md-6">
  16.  
    <div class="am-form-group" style="background: #fcfcfc;">
  17.  
    <select id="doc-select-1" style="width: 100%;font-size: 16px;line-height: 20px;padding: 15px 20px;border-radius: 3px;color: #262626;border: 2px solid #e9e9e9;">
  18.  
    <option value="我有需求">我有需求</option>
  19.  
    <option value="产品咨询">产品咨询</option>
  20.  
    <option value="业务合作">业务合作</option>
  21.  
    </select>
  22.  
    <span class="am-form-caret"></span>
  23.  
    </div>
  24.  
    </div>
  25.  
    </div>
  26.  
     
  27.  
    <div class=am-g>
  28.  
    <div class="am-u-md-12" style="padding: 1rem;">
  29.  
    <div class="am-form-group">
  30.  
    <textarea class="" rows="5" id="doc-ta-1" placeholder="写下您想说的..." required></textarea>
  31.  
    </div>
  32.  
    </div>
  33.  
    </div>
  34.  
     
  35.  
    <div class="am-g">
  36.  
    <div class="am-u-md-9">
  37.  
     
  38.  
    </div>
  39.  
    <div class="am-u-md-3">
  40.  
    <p><span id="btn" class="am-btn am-btn-default btn-reguest am-fr btn-fl" >提交</span></p>
  41.  
    </div>
  42.  
    </div>
  43.  
    </form>

 HTML写好了首先要获取input输入框的内容和select的值。然后使用Ajax请求讲参数传给后端。

  1.  
    <script src="../assets/js/jquery-2.1.0.js" charset="utf-8"></script>
  2.  
    <script src="../assets/js/amazeui.js" charset="utf-8"></script>
  3.  
    <script>
  4.  
    $(function () {
  5.  
    $("#btn").click(
  6.  
    function () {
  7.  
    //发送ajax请求的代码
  8.  
    if(sessionStorage.getItem("upmsg")){
  9.  
    alert("你已提交过啦，下次再来！")
  10.  
    return
  11.  
    }
  12.  
    var data={
  13.  
    phone:$("#doc-ipt-email-3").val(),
  14.  
    real_name:$("#doc-ipt-email-1").val(),
  15.  
    email:$("#doc-ipt-email-2").val(),
  16.  
    content:$("#doc-ta-1").val(),
  17.  
    cooperation:$("#doc-select-1").val()
  18.  
    }
  19.  
    console.log(data)
  20.  
    $.ajax({
  21.  
    url:"http://api.XXXX.vip/Api/Index/createMessage" , //请求路径
  22.  
    type:"get" , //请求方式
  23.  
    data,//请求参数
  24.  
    dataType:"json",//设置接受到的响应数据的格式
  25.  
    //回调函数
  26.  
    success:function (data) {
  27.  
    console.log(data);
  28.  
    if(data.code==200){
  29.  
    sessionStorage.setItem("upmsg",data.real_name)
  30.  
    alert("提交成功")
  31.  
    window.location.reload()
  32.  
    }else{
  33.  
    alert(data.message)
  34.  
    }
  35.  
     
  36.  
    },
  37.  
    error:function (e) {
  38.  
    console.log("出错啦...",e)
  39.  
     
  40.  
    }//表示如果请求响应出现错误，会执行的这个回调函数
  41.  
     
  42.  
    })
  43.  
    }
  44.  
    );
  45.  
    });
  46.  
     
  47.  
    </script>

接下来就是列表页，获得数据后需要使用jQuery讲标签拼接起来

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="utf-8">
  5.  
    <title></title>
  6.  
    <link rel="alternate icon" type="image/png" href="../assets/images/favicon.png" />
  7.  
    <link rel="stylesheet" href="../assets/css/amazeui.css" />
  8.  
     
  9.  
     
  10.  
    <script src="../assets/js/jquery-2.1.0.js" charset="utf-8"></script>
  11.  
    <script src="../assets/js/amazeui.js" charset="utf-8"></script>
  12.  
    </head>
  13.  
    <body>
  14.  
    <table class="am-table am-table-bordered am-table-striped am-table-hover">
  15.  
    <thead>
  16.  
    <tr>
  17.  
    <th>姓名</th>
  18.  
    <th>类型</th>
  19.  
    <th>手机</th>
  20.  
    <th>需求</th>
  21.  
    <th>邮箱</th>
  22.  
    </tr>
  23.  
    </thead>
  24.  
    <tbody id="tbody">
  25.  
     
  26.  
     
  27.  
    </tbody>
  28.  
     
  29.  
    </table>
  30.  
    <script>
  31.  
     
  32.  
     
  33.  
    var person=prompt("请输入您的名字","");
  34.  
    if(person=="admin"){
  35.  
    getlist()
  36.  
    }
  37.  
     
  38.  
    function getlist(){
  39.  
     
  40.  
    $.ajax({
  41.  
    url:"http://api.xxxxx.vip/Api/Index/messageList" , //请求路径
  42.  
    type:"get" , //请求方式
  43.  
     
  44.  
    dataType:"json",//设置接受到的响应数据的格式
  45.  
    //回调函数
  46.  
    success:function (data) {
  47.  
    console.log(data.data.list);
  48.  
    var list=data.data.list
  49.  
    var trDom=""
  50.  
    for (var i = 0; i < list.length; i ) {
  51.  
    trDom =`<tr><td>${list[i].real_name}</td><td>${list[i].cooperation}</td>
  52.  
    <td>${list[i].phone}</td><td>${list[i].content}</td><td>${list[i].email}</td>
  53.  
    </tr>`;
  54.  
     
  55.  
     
  56.  
    }
  57.  
     
  58.  
    $("#tbody").html(trDom);
  59.  
    },
  60.  
    error:function () {
  61.  
    console.log("出错啦...")
  62.  
    }//表示如果请求响应出现错误，会执行的这个回调函数
  63.  
     
  64.  
    })
  65.  
    }
  66.  
     
  67.  
     
  68.  
     
  69.  
    </script>
  70.  
    </body>
  71.  
    </html>

学新通

 注意的是后端是已经处理了跨域的了，要是出现跨域，最好直接叫后端处理就是了。前端处理方法以前搞过，但是忘记了，比较懒就直接后端处理了

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhifbcgf
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群