HTML和jQuery拆分成两个文件

最新推荐文章于 2022-08-26 09:36:52 发布

Emmahuu424

最新推荐文章于 2022-08-26 09:36:52 发布

阅读量328

点赞数

分类专栏：笔记文章标签： jquery html web development

本文链接：https://blog.csdn.net/weixin_42240915/article/details/106805523

版权

笔记专栏收录该内容

87 篇文章 0 订阅

订阅专栏

合并写法

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
	<!--链接式-->
	<link rel="stylesheet" href="{% static 'css/base_emma.css' %}">
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
	<script src="{% static 'js/emma.js' %}"></script>
	<title>tst01 title</title>
</head>

<body>
    <div>
        <p>
            Settings
        </p>
	    input_name
	    <input value="input">
	    check_name
        <input type="checkbox" value="checkbox">
	    radio_name
        <input type="radio" value="radio"><br>
	    <h3 class="notbr">Accounts:</h3>
	    <h4 id="account" class="notbr" >点击开始获取</h4><br>
	    <h3 class="notbr">Passwords:</h3>
        <h4 id="pwd" class="notbr">点击开始获取</h4><br>
        <button id="start_button">
            开始
        </button>
    </div>
</body>

<!--嵌入式-->
<script>
$(function emmajs1(){
    $('#start_button').click(function(){
        //只是调用了views
        $.get({url:"../tst02 "},function(data){
            $('#account').html(data['account']);
            $('#pwd').html(data['pwd']);
        })
    })
})
</script>
</html>

拆分写法

1. HTML文件

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
	<!--链接式-->

	<link rel="stylesheet" href="{% static 'css/base_emma.css' %}">
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
	<script src="{% static 'js/emma.js' %}"></script>
	<title>tst01 title</title>
</head>

<body>
    <div>
        <p>
            Settings
        </p>
	    input_name
	    <input value="input">
	    check_name
        <input type="checkbox" value="checkbox">
	    radio_name
        <input type="radio" value="radio"><br>
	    <h3 class="notbr">Accounts:</h3>
	    <h4 id="account" class="notbr" >点击开始获取</h4><br>
	    <h3 class="notbr">Passwords:</h3>
        <h4 id="pwd" class="notbr">点击开始获取</h4><br>
        <button id="start_button">
            开始
        </button>
    </div>
</body>

<!--嵌入式-->
<script>
emmajs1();
</script>

</html>

2. JS文件

$(function emmajs1(){
    $('#start_button').click(function(){
        //只是调用了views
        $.get({url:"../ifm02 "},function(data){
            $('#account').html(data['account']);
            $('#pwd').html(data['pwd']);
        })
    })
})

Emmahuu424

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML和jQuery拆分成两个文件

合并写法<!DOCTYPE html><html lang="en">{% load staticfiles %}<head> <meta charset="UTF-8">  <link rel="stylesheet" href="{% static 'css/base_emma.css' %}"> <script src="{% static 'js/jquery-3.3.1.m
复制链接

扫一扫

专栏目录