<p>我将在这里介绍一个计算的最小应用。我们用wish操作给出两个数字,django进行计算并用json返回答案。
请注意,我使用了ajax/jquery回调概念,并在django视图中禁用了csrf控件,并免除了csrf_的限制。在</p>
<p>HTML/javaScript:</p>
<pre><code> <div class="container">
<form class="col-lg-6" id="form">
<legend>Select number to make an operation</legend>
Number 1: <input type="number" class="form-control" id="n1">
Number 2: <input type="number" class="form-control" id="n2">
Select operation:
<select class="form-control" name="op" id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
</select>
<input type="submit" id="submit" value="Send">
</form>
<div>
<h2 class="result-box">The result is : <strong id="result"></strong></h2>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
function call_ajax(f) {
const n1 = $('#n1').val();
const n2 = $('#n2').val();
const op = $('#form option:selected').text();
const data = {n1: n1, n2: n2, op: op}
// you can verify the data in the browser console
console.log(data);
$.ajax({
url: '/ajax/make_operation/',
data: data,
type: 'POST',
success: f,
error: function(error) {
console.log(error);
}
});
}
function server_response(response) {
// convert to json format
const r = JSON.parse(response);
console.log(r);
// include the result in the dom
var text = document.createElement('i');
text.innerHTML = '<strong id="result">' + r.result + '</strong>';
$('#result').replaceWith(text);
}
//Validate
$('#form').submit(function(e) {
e.preventDefault();
call_ajax(server_response);
});
});
</script>
</body>
</html>
</code></pre>
<p>在视图.py公司名称:</p>
^{pr2}$
<p>在网址.py在</p>
^{3}$
<p>所以有很多选择。我只展示了一种使用django实现ajax的方法(没有django表单)。在</p>