2022暑期實踐（Django教程學習記錄）（第五周2）P57Ajax2

P57Ajax2
三個ajax傳參的示例

{% extends 'layout.html' %}
{% block content %}
<div class="container">
<h1>Ajax案例</h1>
<h3>示例1</h3>
{# <input type="button" class="btn btn-primary" value="點擊" onclick="clickMe();"/>#}
<input type="button" class="btn btn-primary" id="btn1" value="點擊1"/>
<h3>示例2</h3>
<input type="text" id="nameUser" placeholder="姓名">
<input type="text" id="ageUser" placeholder="年齡">
<input type="button" class="btn btn-primary" id="btn2" value="點擊2"/>
<h3>示例3</h3>
<form id="form3">
<p><input type="text" name="user" placeholder="姓名"></p>
<p><input type="text" name="age" placeholder="年齡"></p>
<p><input type="text" name="email" placeholder="郵箱"></p>
<p><input type="text" name="more" placeholder="年齡"></p>
<p><input type="button" class="btn btn-primary" id="btn3" value="點擊3"/></p>
</form>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript"> {
#基於dom方法綁定事件#} {
#function clickMe(){
#} {
# console.log("點擊了按鈕");#} {
# $.ajax({
#} {
# url: '/task_ajax',#} {
#type: 'get',#} {
# type: 'post',#} {
# data: {
#} {
# n1: 123,#} {
# n2: 'abc',#} {
# },#} {
# success: function (res){
#} {
# console.log(res);#} {
# }#} {
# })#} {
# } #} $(function () {
 //頁面框架加載完成後自動執行 bindBtn1Event(); bindBtn2Event(); bindBtn3Event(); }) function bindBtn1Event() {
 $("#btn1").click(function () {
 $.ajax({
 url: '/task_ajax/', type: 'post', data: {
 n1: 123, n2: 'abc', }, {
#將後端傳過來JSON的轉成字符串反序列化成JSON對象，使得前端可以直接調用#} dataType: "JSON", success: function (res) {
 console.log(res); console.log(res.data) } }) }) } function bindBtn2Event() {
 $("#btn2").click(function () {
 $.ajax({
 url: '/task_ajax/', type: 'post', data: {
 name: $("#nameUser").val(), age: $("#ageUser").val(), }, {
#將後端傳過來JSON的轉成字符串反序列化成JSON對象，使得前端可以直接調用#} dataType: "JSON", success: function (res) {
 console.log(res); console.log(res.data) } }) }) } function bindBtn3Event() {
 $("#btn3").click(function () {
 $.ajax({
 url: '/task_ajax/', type: 'post', {
#示例3使用表單就不用一個個的傳值了#} data: $("#form3").serialize(), {
#將後端傳過來JSON的轉成字符串反序列化成JSON對象，使得前端可以直接調用#} dataType: "JSON", success: function (res) {
 console.log(res); console.log(res.data); } }) }) } </script>
{% endblock %}