一分钟搭建前端测试后端ajax

    <script src="~/Scripts/jquery-3.3.1.min.js">  </script>
    <script>
        function MyAjax(url,json) {
            var dd;
            $.ajax({
                type: "post",
                contentType: "application/json;charset=UTF-8",
                url: url,
                data: json,
                //启动同步，不然会拿不到数据
                async: false,
                success: function (result) {
                    dd = result.msg;
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    dd=e.statusText;
                }
            });
            return dd;
        };
        $(document).ready(function () {
            $("#test").click(function () {
                var url = "/bookmark/ftest";

                var student = new Object();
                student.mark = "柯乐义";
                student.url = "25";
                var json = JSON.stringify(student);

                var dd = MyAjax(url, json);
                alert(dd);

            });
            $("#fname").click(function () {
                $("#content").load("/bookmark/findbyname?mark=" + $("#inp").val());
            });
            $("#findall").click(function () {
                $("#content").load("/bookmark/findAll");
            });
            $("#save").click(function () {
                var mark = $("#mark").val();
                var url = $("#url").val();
                $("#content").load("/bookmark/save?mark=" + mark + "&&url=" + url);
            });
            $("#remove").click(function () {
                var mark = $("#mark_r").val();
                var url = $("#url_r").val();
                $("#content").load("/bookmark/remove?mark=" + mark + "&&url=" + url);
            });
            $("#update").click(function () {
                var mark = $("#mark_u").val();
                var url = $("#url_u").val();
                $("#content").load("/bookmark/update?mark=" + mark + "&&url=" + url);
            });
        }); 
    </script>

首先引入jquery的库。很简单就是js标签包裹，src引入

 <script src="~/Scripts/jquery-3.3.1.min.js">  </script>

然后一般添加按键的事件，固定的js标签，然后是$(document)获取到页面对象，调用ready方法，里面是一个匿名函数就ok。

   <script>
   $(document).ready(function () {
alert("加载完成");
}
      </script>

绑定事件就是加载完成之前绑定id对应的方法
就$("#id")就获取到对象了。

$("#fname").click(function () {
                $("#content").load("/bookmark/findbyname?mark=" + $("#inp").val());
            });

关键点获取输入框的值需要使用.val()方法
$("#inp").val();
文本就用.html()或者.text()都是函数获取

然后是自定义函数
一般放在外面的js便签里面，方便调用。

function MyAjax(url,json) {
            var dd;
            $.ajax({
                type: "post",
                contentType: "application/json;charset=UTF-8",
                url: url,
                data: json,
                //启动同步，不然会拿不到数据
                async: false,
                success: function (result) {
                    dd = result.msg;
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    dd=e.statusText;
                }
            });
            return dd;
        };

注意的是函数体上不用写返回值，对于学java的来说这有点不科学。
就是 function MyAjax()
无论有没有返回值都是有个名字就好了。
然后传参的时候也不需要使用类型判断，直接取名字就好了。。。
function MyAjax(url,json) {}

在里面就可以直接调用。
然后下面就是标准的ajax请求

$.ajax({
                type: "post",
                contentType: "application/json;charset=UTF-8",
                url: url,
                data: json,
                //启动同步，不然会拿不到数据
                async: false,
                success: function (result) {
                    dd = result.msg;
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    dd=e.statusText;
                }
            });

注意的是不要尝试访问url=www.baidu.com之类的，因为存在跨域请求。。。

返回的值需要返回到值，不然就是对象，就是说不能在ajax里面return
而且保存也不能写dd=result;
需要取到值，然后返回.dd=result.msg;

最后是js的json格式的转化问题
一般是提交json格式，得到的也是json格式。
所以转化方式如下;

 var student = new Object();
                student.mark = "柯乐义";
                student.url = "25";
                var json = JSON.stringify(student);

这样就获取到json值了.
然后如何转化出来呢？

JSON.stringify(jsonobj): 
//可以将json对象转换成json字符串

jQuery.parseJSON(jsonString)  
//将格式完好的json字符串转为与之对应的json对象

先写到这，后面再补充，方便下自己使用前端。。。。