前后端交互笔记
如果你也刚刚开始学习前后端等相关知识, 那么可能你会有许多困惑. 本篇文章将会介绍前后端的关键概念, 并对相似的词汇进行区分. 我相信读完后你会对前后端的交互有一个最基本的概念.
HTML5
html语言用于规定网页的内容. 一个页面上有什么内容通过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>
CSS
CSS 是一种描述 HTML 文档样式的语言. CSS 描述应该如何显示 HTML 元素, 规定网页的布局.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
JS
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;
}
}
//存有 XMLHttpRequest 的状态. 从 0 到 4 发生变化.
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成, 且响应已就绪
而JQuery发送AJAX分为5个步骤:
传输的 url
也就是所谓的数据往哪个地址拿数据
type
请求的类型 比如有: post/ put/ get/ delete
data
要传输给后端的数据, 没有可以不写
dataType:'json'
如果Php端声明了json返回, 那么js端可以不用写dataType="json";如果Php端没有声明json返回, 那么js端必须写ataType="json"
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;
}
@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)
PHP
PHP(全称: PHP: Hypertext Preprocessor, 即"PHP: 超文本预处理器")是一种通用开源脚本语言. PHP 脚本在服务器上执行.
PHP 可以收集表单数据;可以发送和接收 cookies;可以添加、删除、修改您的数据库中的数据;
扩展阅读: AJAX访问数据库实例