好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Django2:Web项目开发入门笔记(9)

这一篇教程,我们来了解一些关于JavaScript的使用。

JavaScript是网络脚本语言,它能够用来动态的改进设计(页面元素、内容以及交互效果等)、验证表单、检测浏览器、创建cookie等等。

所以,JavaScript非常强大,也非常受欢迎,基本上我们日常访问的网站都有嵌入JavaScript代码。

但是,JavaScript这门语言学起来并不复杂,它非常简单。

关于JavaScript这门语言的学习,大家可以参考: http://www.w3school.com.cn/js/

不过,在这里,我们要使用的是JavaScript的一个强大而知名的库:JQuery。

并不是了解了JavaScript就能够掌握JQuery,就好像不是学完了Python就会使用Django一样。

JQuery的使用同样需要进行相关的学习。

关于JQuery这个库的使用,大家可以参考: http://www.w3school.com.cn/jquery/

在这里,我们只做一些简单的了解,满足我们的实现目标。

一、调用JQuery库

JQuery库可以到官网下载:http://jquery.com/download/

然后,将下载的文件放入项目中进行使用。

在这里,我们不采用下载这种方式,而是在线调用。

在模板文件的HTML代码中,只需要添加下方语句,即可实现在线调用百度静态资源公共库所提供的JQuery库文件。

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

二、相关语法

使用JQuery库,我们需要了解一些JavaScript的语法和JQuery的特定语法。

1、在HTML文件中,JavaScript脚本的代码内容也要写在一对标签中。

<script>
    ......
    脚本代码
    ......
</script>

2、需要使用var定义变量。

var name = '小楼';

3、语句以分号“;”结束。

$('#msg_user').html('请输入用户名!');

4、通过属性选择器“$(‘#id’)”获取页面中的元素对象。(见上句代码)

5、语句块写在一对大括号中“{}”。

function(){
    ...语句块...
}

6、条件写在小括号“()”中。

if (name === ''){}
for(i in list){}

7、条件判断的运算符使用“===”表示相等的关系;使用“!==”表示不相等的关系。

需要了解的语法就这么多,在下面的内容中我们会用到这些语法。

另外,我们还要了解一块内容:Ajax。

Ajax(Asynchronous Javascript And XML:异步 JavaScript 和 XML)是一种创建交互式网页应用的网页开发技术。

它能够无需重新加载整个网页而更新部分网页内容。

关于Ajax的相关资料,大家可以参考: http://www.w3school.com.cn/ajax/

那么,Ajax如何使用呢?

在JQuery 库中拥有完整的 Ajax 兼容套件。

我们只需要使用其中的函数和方法,就可以在不刷新浏览器的情况下从服务器加载数据。

下面,我们来看本篇教程要实现的案例。

首先,我们先来实现一个用户注册的功能。

这个注册功能需要的标签比较简单,只有一个用户名输入框、一个密码输入框以及一个提交注册的按钮。

要实现的具体功能包括:

当光标离开用户名输入框时,如果没有输入任何内容,则在用户名后方提示“请输入用户名!” 当光标离开用户名输入框时,数据库表中已存在相同的用户名,则在用户名后方提示“用户名已存在!” 当点击提交注册按钮时,如果用户名和密码都已输入,则将用户名和密码存入数据库中,并返回成功的状态编号; 根据返回的成功编号,在提交注册按钮后方提示“恭喜您,注册成功!”。

以上这些功能,都是在页面无刷新的情况下完成的。

提示:一个完成的登录面板的验证与提示并不仅仅这么多,大家可以根据需求完成更多的功能。这里仅仅为讲解知识点,省略类似的其他功能。

一、创建模板文件(register.html)

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<h3>用户注册</h3>
<input type="text" name="user_name" id="user_name">
<label id="msg_user"></label><br>
<input type="password" name="password" id="password">
<label id="msg_pass"></label><br><br>
<button type="button" id="register">注册</button>
<label id="msg_reg"></label>
</body>
</html>

在上方代码中,主体内容(body)的每个标签都和之后要写的脚本代码相关,所以全部加上“id”属性并设置属性值。

查看更多关于Django2:Web项目开发入门笔记(9)的详细内容...

  阅读:15次