• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

    本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法。分享给大家供大家参考,具体如下:

    方法一: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法

    前端代码

    !DOCTYPE html>
    html>
     head>
     meta charset="UTF-8">
     title>ajax交互/title>
     script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js">/script>
     script>
      $('.but').click(function () {
        var formData = $("#myform").serialize();//formData值:account=sdfpasswd=sdf
        //serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法
        $.ajax({
          type: "post",
          url: "{:url('index/index/reg')}", //数据传输的控制器方法
          data: formData,//这里data传递过去的是序列化以后的字符串
          success: function (data) {
            console.log(data);
            $("#content").append(data);//获取成功以后输出返回值
          }
        });
        return false;
      })
    /script>
     /head>
     body>
     form id="myform">
      !--这里给表单起个id用于获取表单并序列化-->
      input type="text" name="account" />
      input type="password" name="passwd" />
      input type="button" value="提交" class="but">
     /form>
     div id="content">
     /div>
     /body>
    /html>
    
    

    后端代码

    public function reg($account,$passwd){
     if($account == '123'){
      return json("ajax成功!".$account."---".$passwd);
     }else{
      return json("你输出的是其他值:".$account."---".$passwd);
     }
    }
    
    

    方法二: 利用layui的form.on事件监听

    前端代码

    !doctype html>
    html lang="en">
    head>
      meta charset="UTF-8">
      title>管理员登录/title>
      meta name="renderer" content="webkit|ie-comp|ie-stand">
      meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      meta name="viewport"
         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      meta http-equiv="Cache-Control" content="no-siteapp"/>
      link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon"/>
      link rel="stylesheet" href="./static/css/font.css" rel="external nofollow" >
      link rel="stylesheet" href="./static/css/weadmin.css" rel="external nofollow" >
      script src="./lib/layui/layui.js" charset="utf-8">/script>
    /head>
    body class="login-bg">
    div class="login">
      div class="message">管理登录/div>
      div id="darkbannerwrap">/div>
      form method="post" class="layui-form">
        input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
        hr class="hr15">
        input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
        hr class="hr15">
        input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        hr class="hr20">
      /form>
    /div>
    script src="./static/js/jquery-3.3.1.min.js">/script>
    script type="text/javascript">
      layui.extend({
        admin: '{/}./static/js/admin'
      });
      //layui.use调用模块
      layui.use(['form', 'admin'], function () {
        //获得form模块
        var form = layui.form
          , admin = layui.admin;
        //监听提交
        //事件监听
        //语法:form.on('event(过滤器值)', callback);(过滤器值指lay-filter="过滤器值")
        //function(data)里的data是一个object,data.field是表单填写的内容
        form.on('submit(login)', function (data) {
          //$.post写法:$(selector).post(URL,data,function(data,status,xhr),dataType)
          var post_data = data.field;
          $.post("{:url('verify')}"
            , post_data
            , function (data) {
              console.log(data);
            }
          )
          return false;
        });
      })
      ;
    /script>
    !-- 底部结束 -->
    /body>
    
    

    后端代码

     public function verify()
      {
        $posts = input("post.password");
        return json($posts);
      }
    
    

    更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

    希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

    您可能感兴趣的文章:
    • thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
    • ThinkPHP5.1+Ajax实现的无刷新分页功能示例
    • ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
    • Thinkphp5框架ajax接口实现方法分析
    • thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
    • ThinkPHP框架结合Ajax实现用户名校验功能示例
    • thinkPHP利用ajax异步上传图片并显示、删除的示例
    • TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
    • ThinkPHP 5 AJAX跨域请求头设置实现过程解析
    上一篇:tp5框架基于ajax实现异步删除图片的方法示例
    下一篇:PHP实现Markdown文章上传到七牛图床的实例内容
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结 TP5,thinkPHP5,框架,使用,ajax,