TP5 (thinkphp5) framework using Ajax to achieve interaction with background data method summary

Time:2021-7-19

This paper introduces the method of TP5 (thinkphp5) framework using Ajax to interact with background data. The details are as follows:

Method 1The Serialize () method creates a URL encoded text string by serializing the form value. This is the method provided by jQuery

Front end code

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 < title > Ajax interaction
 <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
 <script>
  $('.but').click(function () {
    var formData = $("#myform").serialize();// Formdata value: account = SDF & passwd = SDF
    //The Serialize () method creates a URL encoded text string by serializing the form value. This is the method provided by jQuery
    $.ajax({
      type: "post",
      URL: "{: URL ('index / index / reg ')}" // controller method of data transmission
      Data: formdata, // here the data passed is the string after serialization
      success: function (data) {
        console.log(data);
        $("#content").append(data);// After obtaining success, output the return value
      }
    });
    return false;
  })
</script>
 </head>
 <body>
 <form>
  <!-- Here, give the form an ID to get the form and serialize it -- >
  <input type="text" name="account" />
  <input type="password" name="passwd" />
  < input type = button "value = submit" >
 </form>
 <div>
 </div>
 </body>
</html>

Back end code

public function reg($account,$passwd){
 if($account == '123'){
  Return JSON ("Ajax succeeded!")$ account."---".$passwd);
 }else{
  Return JSON ("what you output are other values):. $account." ---. $passwd) ";
 }
}

Method 2: using form.on event monitoring of layui

Front end code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  < title > administrator login
  <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>
<div>
  < div > Manage login
  <div></div>
  <form method="post">
    < input name = "user name" placeholder = "user name" type = "text" lay verify = "required" >
    <hr>
    < input name = password "lay verify = required" placeholder = password "type = password" >
    <hr>
    < input value = "login" lay submit lay filter = "login" style = "width: 100%;" type="submit">
    <hr>
  </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 calling module
  layui.use(['form', 'admin'], function () {
    //Get the form module
    var form = layui.form
      , admin = layui.admin;
    //Monitor submission
    //Event monitoring
    //Syntax: form. On ('event '(filter value)), callback( Filter value refers to "lay filter" ("filter value")
    //Data in function (data) is an object, and data. Field is the content of the form
    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>
<!--  Bottom end -- >
</body>

Back end code


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

For more information about ThinkPHP, interested readers can check out the following topics: introduction to ThinkPHP, summary of operation skills of ThinkPHP template, summary of common methods of ThinkPHP, introduction to CodeIgniter, CI (CodeIgniter) framework advanced course, Zend framework introduction course and PHP template technology summary.

I hope this article will be helpful to the design of PHP program based on ThinkPHP framework.

Recommended Today

MSSQL · query and sort the records of all tables in a database

Reading time |0.27 minutes word count |444 characters primary coverage |1. Introduction & background “MSSQL · query and sort the records of all tables in a database” Author | SCscHero Writing time | 2021/7/13 PM10:0 Article type |Series Degree of completion |Completed motto Every great cause has a trivial beginning. 1、 Introduction & background    Completion: […]