TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

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

  • 前端代码

<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=sdf&passwd=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">
   
   <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事件监听

  • 前端代码

<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" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/weadmin.css">
    <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);
    }

你可能感兴趣的:(demo,TP5)