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

在上面的几篇文章中，本人已经基本可以在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;




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