第五篇文章:在Django中用Jquery实现Ajax

心已入冬 提交于 2019-12-03 16:44:03

在上面的几篇文章中,本人已经基本可以在Django模版中实现网页的加载,同时使用HTML中的表单,点击按钮可以跳转到下一个界面。


跳转到下一个界面一般需要加载更多的资源,如果需要在当前目前中动态更新信息,则需要Ajax技术,AJax技术即  Asynchronous JavaScript and Xml,其最大的特点就是异步特性,大家知道在计算机系统中,往往异步比同步更好,例如IO多路复用中。使用AJax可以在不重新加载整个页面的情况下,可以与服务器交换数据,并且更新部分网页内容。


在前面的文章中,本人都是使用HTML变到提取数据,表单部分代码如下:

 <table border = 0>
			<form action="/EngineDif/" name = "edform" method="get">
			
			<tr><td><font size="4">输入语法: yyyy-mm-dd dCity-aCity,yyyy-mm-dd dCity-aCity...</font> </td></tr>
		
			<tr>
				<td><input type="text" id = "id_query" name="query" size=60 value="2017-07-08 USM-BKK,2017-07-09 BKK-SHA" 
				οnfοcus="if(this.value == '2017-05-08 USM-BKK,2017-06-09 BKK-SHA') this.value='';" /></td>
				<td><input type="checkbox" name="AGG" checked="checked" onClick="return KeepCount()" value="AGG" />AGG</td>
				<td><input type="checkbox" name="AMA" checked="checked" onClick="return KeepCount()" value="AMA" />AMA</td>
				<td><input type="checkbox" name="CSE" onClick="return KeepCount()" value="CSE" />CSE</td>
				<td align="right"><button type="submit" class="btn btn-success">Run Dif</button></td>
			</tr>
			</form>
		</table>


通过name = "query" method = "GET" 后台Django程序可以通过GET方法得到query数据。相关Python代码如下:

def views_engine_dif(request):
    message = '';
    if 'query' in request.GET:
        message = request.GET['query']
    else:
        message = 'You submitted an empty form'
    print message;


现在如果使用Jquery里面的ajax方法的话,html代码中js代码如下:

<script>
 jQuery(function($){
        $('button').click(function(){
			query = $("#id_query").val()
			alert("Value: " + query);
			
			$.post("/EngineDif/",
			{
				"query":query,
			},
			function(data,status){
            alert("数据:" + data + "\n状态:" + status);
			$(detailed_infor).html(data);
         });
      });
    });
</script>




表单方法改为如下部分:

  <p><font size="4">输入语法: yyyy-mm-dd dCity-aCity,yyyy-mm-dd dCity-aCity...</font> </p>       
		<p>输入信息:<input type="text" id="id_query" value="2017-07-08 USM-BKK,2017-07-09 BKK-SHA"></p>
		<button>查询</button>


然后在Django的URL中添加/EngineDif/ 添加对应的处理函数即可,如下所示:

    url(r'^EngineDif/$',views.views_engine_dif, name = 'EngineDif'),

在views中,修改代码如下,注意使用的是POST方法:

def views_engine_dif(request):
    message = '';
    if 'query' in request.POST:
        message = request.POST['query']
    else:
        message = 'You submitted an empty form'
    print message;


这样就可以在网页中,实现动态加载网页了,快去试试吧!











易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!