数据验证、ajex、构造html

最新推荐文章于 2024-08-04 16:33:59 发布

_Anthea

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量98

点赞数

文章标签： javascript html json

本文链接：https://blog.csdn.net/m0_62113052/article/details/130324919

版权

# 实验5
<script>
        $().ready(function () {
            $("#btn").click(function () {
                //数据验证
                var errorMsg = "";
                if($("#username").val() == ""){
                    errorMsg = "* 用户名不能为空";
                }
                else if($("#phone").val() == ""){
                    errorMsg = "* 手机号不能为空";
                }
                else if($("#password").val() == ""){
                    errorMsg = "* 密码不能为空";
                }
                else if($("#password_true").val() == ""){
                    errorMsg = "* 确认密码不能为空";
                }
                else if($("#password").val() != $("#password_true").val()){
                    errorMsg = "* 两次输入密码不一致";
                }
                if(errorMsg != ""){
                    $("#errorInfo").text(errorMsg);
                    $("#errorInfo").css("display", "block");
                }
                else {
                    var paras = {name:$("#username").val(), phone:$("#phone").val(), password:$("#password").val()};
                    $.ajax({
                        url: "http://43.136.217.18:8081/registAsync",
                        // url: "registAsync",
                        data: paras,
                        type: "POST",
                        //访问成功，解析json
                        success: function (data) {
                            if(data.state == "SUC"){
                                window.location.href = "http://43.136.217.18:8081/success.html";
                                // window.location.href = "success.html";
                            }
                            else{
                                $("#errorInfo").text(data.msg);
                                $("#errorInfo").css("display", "block");
                            }
                        },
                        //访问失败
                        error: function (data) {
                            $("#errorInfo").text("无法连接到服务器");
                            $("#errorInfo").css("display", "block");
                        }
                    })
                }
            });


        })
    </script>

实验6

 <script>
    $().ready(function () {
      $("#wordArea input").on("input", function () {
        var wordClip = $(this).val()//val()获取表单中显示的值
        // var word = this.value//等价的原生JavaScript方法
        //发起ajax请求
        $.ajax({
         url: "http://43.136.217.18:8081/getSimilarWords",
		      // url: "getSimilarWords",
          data: {word: wordClip, max: 20},
          type: "GET",
          dataType: "JSON",
          success: function (data) {
            if(data.state == "SUC"){
              var htmlCode = "<ul>";
              for(var i in data.content){
                htmlCode += "<li><b>" + wordClip + "</b>"  + data.content[i].substring(wordClip.length) + "</li>";
              }
              htmlCode += "</ul>";
              $("#resultArea").html(htmlCode);
              $("#resultArea li, #searchArea input").on("click", function () {
                var wordClip;
                if($(this).val() == "查词"){
                  wordClip = $("#wordArea input").val();
                }
                else{
                  wordClip = $(this).text();
                }
                $.ajax({
                 url: "http://43.136.217.18:8081/getWordDetail",
			            // url: "getWordDetail",
                  data: {word: wordClip},
                  dataType: "JSON",
                  success: function (data) {
                    if(data.state == "SUC"){
                      var html = "<table align='center'><tr>";
                      for(var i in data.content){
                          html += "<td>" + data.content[i]['eng'] +"&nbsp;&nbsp;" + "</td><td>";
                        for(var j in data.content[i]['trans']){
                          if(data.content[i]['trans'][j]['pos'].length > 1){
                            html +=   data.content[i]['trans'][j]['pos'].join("&") + data.content[i]['trans'][j]['chn'] + "&nbsp;&nbsp;&nbsp;&nbsp";
                          }
                          else{
                            html +=  data.content[i]['trans'][j]['pos'] + data.content[i]['trans'][j]['chn'] + "&nbsp;&nbsp;&nbsp;&nbsp;";
                          }
                        }
                        html += "</td></tr>";
                      }
                      html += "</table>";
                      $("#resultArea").html(html);
                    }
                    else{
                      var html = "<div id='error'>" + data.msg + "</div>";
                      $("#resultArea").html(html);
                    }
                  },
                  error: function () {
                    var html = "<div id='error'>* 系统错误，未访问到服务器 *</div>";
                    $("#resultArea").html(html);
                  }

                })
              })
            }
            else {
                var html = "<div id='error'>" + data.msg + "</div>";
                $("#resultArea").html(html);
            }
          },
          error: function () {
              var html = "<div id='error'>* 系统错误，未访问到服务器 *</div>";
              $("#resultArea").html(html);
          }
        })
      })
    })
  </script>