HTML,CSS, JS, JQuery，AJAX的关系及区别总结

HTML5, CSS, JS, JQuery, AJAX

学习网站：W3school
https://www.w3school.com.cn/index.html

HTML5

用于规定网页的内容

一个页面上有什么内容通过html文件决定

  <form action="http://localhost:5000/result" method="POST">
     <p>Name <input type = "text" name = "Name" /></p>
     <p>Physics <input type = "text" name = "Physics" /></p>
     <p>Chemistry <input type = "text" name = "chemistry" /></p>
     <p>Maths <input type ="text" name = "Mathematics" /></p>
     <p><input type = "submit" value = "submit" /></p>
     <button>丁语琪</button>
  </form>

Name

Physics

Chemistry

Maths

clean

---

CSS

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素, 规定网页的布局

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

---

JS

JavaScript 对网页行为进行编程

1. JavaScript 能够改变 HTML 内容

2. JavaScript 能够改变 HTML 属性

3. JavaScript 能够改变 CSS 样式

4. JavaScript 能够隐藏 HTML 元素

5. JavaScript 能够显示隐藏的 HTML 元素

简单的 js 可以包含在html文件中，放在<script></script>之中

https://www.w3school.com.cn/tiy/t.asp?f=js_use_head

也可以分开来写单独的 .js 文件, pycharm演示

---

JQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

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

1. 美元符号定义 jQuery
2. 选择符（selector）“查询”和“查找” HTML 元素
3. jQuery 的 action() 执行对元素的操作

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

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

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

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

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

https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide

---

AJAX

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

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

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

1. 需要引入JQuery
2. 需要一个后端接口接收数据并返回

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

原生AJAX:

1. 创建ajax对象
2. 连接到服务器
3. 发送请求（告诉服务器我要什么文件）
4. 接收返回值

//创建对象
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;
    }
  }
  //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪

JQuery发送AJAX分为5个步骤：

1. 传输的 url: 也就是所谓的数据往哪个地址拿数据
2. type: 请求的类型 比如有: post/ put/ get/ delete
3. data: 要传输给后端的数据，没有可以不写
4. dataType:‘json’: 如果Php端声明了json返回，那么js端可以不用写dataType=“json”;如果Php端没有声明json返回，那么js端必须写ataType=“json”;
5. success: 发送数据之后成功的回调函数

<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>

home/shop.php

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

PHP（全称：PHP：Hypertext Preprocessor，即"PHP：超文本预处理器"）是一种通用开源脚本语言。PHP 脚本在服务器上执行。

PHP 可以收集表单数据;
PHP 可以发送和接收 cookies;
PHP 可以添加、删除、修改您的数据库中的数据;

flask

@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)

AJAX访问数据库实例：
https://www.w3school.com.cn/tiy/t.asp?f=ajax_database