前后端常用词汇区分

约 1384 字大约 5 分钟

前后端

2021-10-18

如果你也刚刚开始学习前后端等相关知识，那么可能你会有许多困惑。本篇文章将会介绍前后端的关键概念，并对相似的词汇进行区分。我相信读完后你会对前后端的交互有一个最基本的概念。

HTML

HTML 语言用于规定网页的内容。一个页面上有什么内容通过 HTML 文件决定。

例如我们可以通过以下的 HTML 代码为网页添加一个标题和一个正文段落。

CSS

CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素，规定网页的布局。

例如我们刚刚使用 HTML 为网页增添了标题和正文。但是很显然不论是字体还是排版都是默认的设计，现在我们希望它变得好看一些。这就需要用到 CSS。

HTML 语言将会决定页面上有哪些元素，而 CSS 语言则是将元素变成你想要的颜色和样式。

JavaScript

JavaScript 对网页行为进行编程，其作用有：

能够改变 HTML 内容。
能够改变 HTML 属性。
能够改变 CSS 样式。
能够隐藏 HTML 元素。
能够显示隐藏的 HTML 元素。

简单的 js 可以包含在 html 文件中，放在 <script> </script> 之中，也可以分开来写单独的 .js 文件。

jQuery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

基础语法是：$(selector).action()。

美元符号定义 jQuery。
选择符 (selector) 负责"查询"和"查找" HTML 元素。
jQuery 的 action() 执行对元素的操作。

所有 jQuery 函数位于一个 document ready 函数中。

<script>
    $(document).ready(function(){
    --- jQuery functions go here ----
    });
</script>

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素。
获得未完全加载的图像的大小。

AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX 用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过 JavaScript DOM 更新一部分节点。期间数据传输可采用 xml，json 等格式，AJAX 最早用于谷歌的搜索提示。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

需要引入 jQuery。
需要一个后端接口接收数据并返回。

AJAX 分为原生 AJAX 和 jQuery.ajax。它们的区别在于：jQuery 是一个优秀的 js 框架，对 js 原生的 AJAX 进行了封装，在封装后的 AJAX 的操作更加简洁，功能更加强大。

原生 AJAX：

创建 AJAX 对象。
连接到服务器。
发送请求告诉服务器我要什么文件。
接收返回值。

//创建对象
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+，Firefox，Chrome，Opera，Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6，IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

//发送请求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

//服务器响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //获得字符串形式响应，responseXML获得XML形式响应

//onreadystatechange函数
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

而 jQuery 发送 AJAX 分为 5 个步骤：

传输的 url。
也就是所谓的数据往哪个地址拿数据。
type。
请求的类型比如有：POST，PUT，GET，DELETE 等。
data。
要传输给后端的数据，没有可以不写。
dataType：'json'。
如果 Php 端声明了 json 返回，那么 js 端可以不用写 dataType="json"。
如果 Php 端没有声明 json 返回，那么 js 端必须写 dataType="json"。
success。
发送数据之后成功的回调函数。

html

<button class="del" value="{$item['id']}">删除</button>
<button οnclick="login1()">发送1</button>
<script>
    $(function(){
        $('.del').click(function(){
            var id =$(this).val();
            $.ajax({
                'url':"{:url('home/shop/delete')}",//请求地址,后台接口(模块/控制器/方法)
                'type':'delete',//请求类型
                'data':'id'+=id,//发送给后端的数据
                'dataType':'json',
                'success':function(res){//成功的回调函数，res= {data:"开发者服务器返回的内容"}
                    alert("删除成功")
                }
            })
        })
    })

    function login1() {
        $.ajax({
            url: "{{ url_for('greet') }}",
            data: {name: 'jenny'},
            type: "POST",
            //dataType: "json",
            success: function(data) {
                // data = eval("(" + data+ ")");
                data = jQuery.parseJSON(data);  // dataType注释了，故注意反序列化
                $("#ret").text(data.result);
            }
        });
    }
</script>

php

// home/shop.php
public function delete($id)
{
    Shops::where(field:'id',$id)->delete();
    $data=[
        'code'=>200,
        'msg'=>'删除成功',
        'status'=>'success'
    ];
    return $data;
}

python

@app.route('/greet'，methods=['GET'，'POST'])
def greet():
    # GET上传的数据用request.args获取，POST上传的数据用request.form获取
    if request.method == 'GET':
        name = request.args.get('name')
        ret = {'result': 'hi，%s' % name}
    else:
        name = request.form.get('name')
        ret = {'result': 'hello，%s' % name}

    return json.dumps(ret)