前端js基础写法

0 背景

本人后端开发，前端小白，因项目需要学习了一些关于angularJs的前端语法。后又因项目缘故，学习基础js写法和ajax请求。这里分享一些js常用的写法（主要关于交互）。

1 href

href是调用后端接口最简单的写法

<!--在html里-->
<a href="后端路径"></a>

<!--在js里-->
window.location.href="后端路径"    //当前窗口打开
window.open="后端路径"     //新窗口打开

2 form表单

采用href表单提交数据

<!--html-->
<form id="testForm" action="后端路径" mothod="post"> 
    <div>
        <input id="testName" name="username">    //id用来在js里绑定数据 name为后端接收数据命名
    </div>
    <div>
        <input id="testDescription" name="description">    //id用来在js里绑定数据 name为后端接收数据命名
    </div>
    <div class="hide">                  //表单里要绑定的数据，但不需显示
        <input name="id" value="id">       //直接在html里绑定
        <input id="otherId" name="otherId" >     //通过id在js里绑定
    </div>
</form>
<div>
    <button class="default_btn">返回</button>
    <button id="submitId" class="blue_btn">提交</button>
</div>

<!--js-->
<script>
    $("#submitId").click(function(){
        var otherId="";
        $("#otherId").val(otherId);  //绑定值
        $("#testForm").ajaxSubmit({        //点击btn提交form表单
            dataType:"json",
            success:function(res){
                alertMsg("提交成功","success");
                setTimeout(function(){
                    window.location.reload();
                },2000);
            },
            error:function(res){
                alertMsg("提交失败");
            }           
        });
    });
</script>

3 ajax请求

<script>
function getAjaxTest(queryString){
    $.ajax({
        url:"后端路径",
        dataType:"json",  //表示返回json数据
        type:"get",
        contentType:"application/json;charset=UTF-8",
        data:{
            queryString:queryString      //get请求时路径参数
        }，
        success:function(data){
            //成功操作
        }，
        error:function(){
            //失败操作
        }
    });
};
<!--get简单请求-->
$.get("后端路径",function(data){
    //get返回处理
});
function postAjaxTest(){
    var data={"id":id,"username":username};
    var jsonData=JSON.stringify(data);
    $.ajax({
        url:"后端路径",
        dataType:"json",       //表示返回json数据
        type:"post",
        contentType:"application/json;charset=UTF-8",
        data:jsonData,        //get请求时路径参数
        success:function(data){
            //成功操作
        }，
        error:function(){
            //失败操作
        }
    });
};
</script>

4 其他常用