• AJAX 入门教程


    一、前言

      AJAX 是我们教程用到的请求数据的技术,在这里我就给自己做一个小结。

    二、案例

      我使用的是 JQuery 的 AJAX 来实践。后端服务我使用的是 c# 的mvc。

      后端代码;

    using com.core.student;
    using com.server.student;
    using Newtonsoft.Json;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    namespace Study.Web.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public string GetStudent()
            {
    
                StudentService studentService = new StudentService();
                var result = JsonConvert.SerializeObject(studentService.GetStudents());
                return result;
            }
    
            public string SetName(string Name) {
                return "您好:"+Name;
            }
    
            public string SetStudent(int id,string name,int age) {
                return JsonConvert.SerializeObject(new Student(id,name,age));
            }
        }
    }

    前端Index.html 界面

    @using com.core.student;
    @model List<Student>
    @{
        ViewBag.Title = "Ajax学习";
    }
    @section StyleCss{
        <style type="text/css">
            table tr td, table tr th {
                border: 1px solid #eee;
                width: 100px;
                text-align: center;
                height: 20px;
            }
    
            table tr:nth-child(2n) td {
                background: #eee;
            }
        </style>
    
    }
    <div class="jumbotron">
        <h1>Ajax 学习</h1>
        <p class="lead">学习获取数据GetStudent(),修改标题SetName(string Name),提交表单数据SetStudent(int id,string name,int age)。</p>
        <p><a href="https://www.cnblogs.com/gzbit-zxx" class="btn btn-primary btn-lg">博客园 幸福摩天轮 &raquo;</a></p>
    </div>
    
    <div class="row">
        <h3 style="100%;border-bottom:1px solid #eee;text-align:center;height:40px;line-height:1.5px;">Ajax 内部调用</h3>
        <div class="col-md-4">
    
            <h2>获取学生信息</h2>
            <table id="table"></table>
            <br />
            <p><a class="btn btn-default" id="learnmore">获取数据</a></p>
        </div>
        <div class="col-md-4">
            <h2 id="title">我是标题</h2>
            <p>点击 “修改标题” 按钮,就会改变 “ 我是标题 ”!</p>
            <input type="type" name="name" value="" id="name" />
            <p></p>
            <p><a class="btn btn-default" id="add-date">修改标题</a></p>
        </div>
        <div class="col-md-4">
            <h2>添加学生</h2>
            <form id="student-form">
                <div class="form-group">
                    <label for="id">学生编号</label>
                    <input type="text" class="form-control" id="id" name="id" placeholder="学生编号">
                </div>
                <div class="form-group">
                    <label for="name">学生姓名</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="学生姓名">
                </div>
                <div class="form-group">
                    <label for="age">学生年龄</label>
                    <input type="text" class="form-control" id="age" name="age" placeholder="学生年龄">
                </div>
                <button type="submit" class="btn btn-default">提交数据</button>
                <p id="show"></p>
            </form>
        </div>
    </div>
    <div class="row">
        <h3 style="100%;border-bottom:1px solid #eee;text-align:center;height:40px;line-height:1.5px;">Ajax 跨越访问</h3>
        <div class="col-md-4">
    
            <h2>跨域问题</h2>
            <a href="https://www.cnblogs.com/sunxucool/p/3433992.html" target="_blank">(点击链接)跨域问题详解 </a>
            <pre style="600px;height:300px;display:block;">
    $(document).ready(function(){
       var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
           +"?id=1&callback=?';
       $.ajax({
         url:url,
         dataType:'jsonp',
         processData: false, 
         type:'get',
         success:function(data){
           alert(data.name);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown) {
         }});
       });
    </pre>
            <p>跨域的话,需要添加 dataType:'jsonp'</p>
        </div>
    
    </div>
    
    @section scripts
    {
        <script type="text/javascript">
            $(function () {
    
                //获取数据
                $("#learnmore").on('click', function () {
                    $.ajax({
                        url: 'http://localhost:55851/Home/GetStudent',
                        success: function (data) {
                            data = JSON.parse(data);
                            var text = "<tr><th>编号</th><th>姓名</th><th>年龄</th></tr>";
                            for (var it in data) {
                                text += '<tr><td>' + data[it].Id + '</td><td>' + data[it].Name + '</td><td>' + data[it].Age + '</td></tr>'
                            }
                            $("#table").html(text);
                        }
                    });
                });
    
                //修改标题
                $("#add-date").on('click', function () {
                    var model = $("#name").val();
                    $.ajax({
                        url: 'http://localhost:55851/Home/SetName',
                        data: { 'name': model },//数据
                        success: function (data) {
                            $("#title").html(data);
                        }
                    });
                });
    
                //提交表单
                $("#student-form").submit(function () {
                    var data = $("#student-form").serialize();
                    $.ajax({
                        url: "http://localhost:55851/Home/SetStudent",
                        data: data,
                        success: function (data) {
                            $("#show").html(data);
                        }
                    });
                    return false;
                });
    
            });
    
        </script>
    }

    界面效果:

    界面请求数据后效果:

    简单自我小结,走过的路。

  • 相关阅读:
    IOS应用内嵌cocos2dx游戏项目
    C++ 动态内存
    C++ 文件和流
    【转】SQL中的锁、脏读、不可重复的读及虚读
    【转】WCF扩展系列
    【转】WCF设置拦截器捕捉到request和reply消息
    关于拦截器模式的理解
    【转】netty源码分析之LengthFieldBasedFrameDecoder
    【转】使用nginx搭建高可用,高并发的wcf集群
    【转】Nginx 反向代理 负载均衡 虚拟主机配置
  • 原文地址:https://www.cnblogs.com/gzbit-zxx/p/10652996.html
Copyright © 2020-2023  润新知