博主信息
博文 37
粉丝 0
评论 1
访问量 37201
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
ajax使用方法和原理-2019-10-29
H先生
原创
730人浏览过

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>js 面向对象</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myClass{width: 140px;height: 50px;background-color: red;}
        .radius{border-radius: 8px}
        .red-rect{width: 50px;height: 50px;background-color: red;}
    </style>
</head>
<body>
<div name="msg">MSG</div>
<div name="contents"></div>
<button onclick="insert_contents()">插入内容</button>

</body>
</html>

<script>
    function insert_contents() {
        $.post('/1028/ajax.php',{realname:'铆钉'},function (data) {
            //
            console.log(data);
        },'json');
    }



    /*function insert_contents() {
        var back = '<div id="__myalert__" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.3"></div>';
        var html = '<div id="__myalert2__" style="position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -50px; width:200px;height:100px;background:#fff;border:1px solid #f1f1f1;border-radius: 8px; z-index: 99"><button onclick="$(\'#__myalert__\').remove();$(\'#__myalert2__\').remove();">确定</button></div>';
        $('div[name="contents"]').append(back+html);
    }*/

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<?php
$admin = array('uid'=>3,'username'=>'admin');

$admin['realname'] = $_POST['realname'];

exit(json_encode($admin));

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png








实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>js 面向对象</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myClass{width: 140px;height: 50px;background-color: red;}
        .radius{border-radius: 8px}
        .red-rect{width: 50px;height: 50px;background-color: red;}
    </style>
</head>
<body>
<form action="">
    <div style="display: none;"><input type="text" name="username" value="admin"></div>
    <div><input type="password" name="pwd" value="sfasf"></div>
    <div><button type="button" onclick="insert_contents()">提交</button></div>
</form>

</body>
</html>

<script>

    function insert_contents() {
        $('div:first').show(100);
    }

    // function insert_contents() {
    //     var username = $('input[name="username"]').value();
    //     alert(username);
    // }



    // 读代码
    // $.ajax
    // setTimeout
    // console.log();
    //
    // push('$.ajax');
    // push('setTimeout');
    //
    // exec('console.log()');
    //
    // while (jspush.length>0){
    //     $code = pop();
    //     exec($code);
    // }
    //
    
    
 /*   function insert_contents() {
        $.ajax({
            type:'POST',
            url:'/ajax.php',
            data:"name=phpcn&location=jiangsu",
            success:function (msg) {
                console.log(msg);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });

        console.log('www.php.cn');


    }
*/

   /* function insert_contents() {
        $.post('/1028/ajax.php',{realname:'铆钉'},function (data) {
            //
            console.log(data);
        },'json');
    }*/



    /*function insert_contents() {
        var back = '<div id="__myalert__" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.3"></div>';
        var html = '<div id="__myalert2__" style="position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -50px; width:200px;height:100px;background:#fff;border:1px solid #f1f1f1;border-radius: 8px; z-index: 99"><button onclick="$(\'#__myalert__\').remove();$(\'#__myalert2__\').remove();">确定</button></div>';
        $('div[name="contents"]').append(back+html);
    }*/

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例



1.png







批改状态:合格

老师批语:非常Good, 继续
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学