ajax demo2

来源：互联网发布：单片机蜂鸣器电路图编辑：程序博客网时间：2024/05/20 11:52

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>review of ajax</title>    <style>        .container {            width: 50%;            margin: 3.25rem auto;        }    </style></head><body>    <div class="container">        <select id="info">            <option value="8">Please select</option>        </select>        <button id="one">Student one</button>        <button id="two">Student two</button>        <p>            <span id="info1"></span>            <span id="info2"></span>        </p>    </div>    <script src="jquery.js"></script>    <script src="ajax.js"></script></body></html>

$(function() {    $("#one").click(function() {        $.ajax({            url: 'stu1.php',            type: 'POST',            dataType: 'json',            data: {},        })        .done(function(data) {            $("#info").html("<option value='8'>Please select</option>");            $.each(data, function(index, val) {                $("#info").append("<option value='" + val + "'>" + index + "</option>");            });        });    });    $("#two").click(function() {        $.ajax({            url: 'stu2.php',            type: 'POST',            dataType: 'json',            data: {},        })        .done(function(data) {            $("#info").html("<option value='8'>Please select</option>");            $.each(data, function(index, val) {                $("#info").append("<option value='" + val + "'>" + index + "</option>");            });        });    });    $("#info").change(function() {        if ($(this).val() == 8) {            $("#info1").text('');            $("#info2").text('');        } else {            $("#info1").text($(this).children("option:selected").text());            $("#info2").text($(this).val());        }    });});

0 0