python+django三种实现ajax的方法（判断三角形实例）

本文链接：https://blog.youkuaiyun.com/weixin_43841577/article/details/89285860

这篇教程介绍了三种使用Python Django结合Ajax实现三角形判断的方法，包括原生script实现和两种jQuery的方式。通过Ajax实现异步数据交互，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

script实现Ajax

本教程是判断三角型，而使用的ajax，包括script的一种方式，和jquery的两种方式

建立方法(function)
代码实例

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>


		{%csrf_token%}
		三角形A边<input type="text" name="one" id="one" "testajax()"><br>
		三角形B边<input type="text" name="two" id="two" "testajax()"><br>
		三角形C边<input type="text" name="three" id="three" "testajax()"><br>
 	通过oninput调用ajax
	
	#下面是返回的结果
	{% if data%}
		{{data}}
	{%endif%}
	

	<script>
		function testajax(){
			var one = document.getElementById("one").value;
			var two = document.getElementById("two").value;
			var three = document.getElementById("three").value;
			
			if (window.XMLHttpRequest)#建立一个实例
			{
				xmlhttp = new XMLHttpRequest();#新版浏览器创建实例的方法
			}

			xmlhttp.onreadystatechange=function()#旧版浏览器创建实例的方法
			{

				if (xmlhttp.readyState==4 && xmlhttp.status==200)#判断是xmlhttp否请求成功
				{
					// alert(three);
					document.getElementById("txtHint").innerHTML=xmlhttp.responseText;#信息
				}
			}
			
			xmlhttp.open("POST","/ajax_submit/",true);#上面已经创建xmlhttp,这里代表的是post请求
		
			xmlhttp.setRequestHeader("X-CSRFToken","{{ csrf_token }}");#这里加入csrt_token
			
			xmlhttp.send(JSON.stringify({'one':one,'two':two,'three':three}));#这里根据要求返回json格式的数据
		}
	</script>
</body>
</html>

jquery之post/get实现ajax

代码如下

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
      {%csrf_token%}
    三角形A边<input type="text" name="one" id="one" "testajax()"><br>
    三角形B边<input type="text" name="two" id="two" "testajax()"><br>
    三角形C边<input type="text" name="three" id="three" "testajax()"><br>
 这里是返回的信息
  {% if data%}
    {{data}}
  {%endif%}
 
 引入jquery
  <script type="text/javascript" src="{% static 'polls/js/jquery-3.3.1.min.js' %}"></script>
  <script type="text/javascript">
    function testajax() {
    var one = $("#one").val();
    var two = $("#two").val();
    var three = $("#three").val();
    
    #这里是POST方式，如需GET方式请求把post改为get即可
    $.post(url='/diceng_ajax_two/',#url：网址
      data={		#data：数据
        'one':one,
        'two':two,
        'three':three,
        csrfmiddlewaretoken: '{{ csrf_token }}',#：加入token
          },
       
       #这里是返回的数据
      function(data,status){
      $("span").html((data))}
        );

  }
  </script>
</body>
</html>

jquery实现ajax(ajax)

建立方法(function)
代码展现

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
      {%csrf_token%}
    三角形A边<input type="text" name="one" id="one" "testajax()"><br>
    三角形B边<input type="text" name="two" id="two" "testajax()"><br>
    三角形C边<input type="text" name="three" id="three" "testajax()"><br>
 这里是返回的信息
  {% if data%}
    {{data}}
  {%endif%}
 
 引入jquery
  <script type="text/javascript" src="{% static 'polls/js/jquery-3.3.1.min.js' %}"></script>
  <script type="text/javascript">

 	创建方法
    function testajax() {
    var one = $("#one").val();
    var two = $("#two").val();
    var three = $("#three").val();
 	
 	#这是ajax请求方式
    $.ajax({
      type : 'POST',//请求的方式
      url : 'jquery_ajax/',//请求的路径
      headers:{'X-CSRFToken':"{{ csrf_token }}"},#加入csrt_token
      async:true,
      data :({//发向后台的数据，必须以json格式
         // csrfmiddlewaretoken:{{ csrf_token }},
        "one" : one,
        "two" : two,
        "three":three
      }),

      dataType:"json",//返回的数据类型
      success : function(data) {//请求成功后执行的函数
        $("span").html((data['data']));
        // alert(JSON.stringify(data))
      },
      error : function(data) {//请求失败后执行的函数
        alert("错误");
      }
    })
  }
  </script>
</body>
</html>