Question

我试图从js文件访问数据，并在html文本框中获取值，但我无法得到结果。这里是samle.js文件和jsonhtml.html文件

＆＃13;

{
"var1":"1";
"var2":"2";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  $(document).ready(function() {
      $.ajaxSetup({cache: false});
       setInterval(function () {
           $.getJSON("sample.js", function (data) {
               if (data.var1) {
                   $('#C1-Cycle').val(data.var1);
               }
               if (data.var2) {
                   $('#C2-Cycle').val(data.var2);
               }
           });
       }, 1000);
  });
})(jQuery);
</script> 
</head>
<body>
<div>
<input type="text" id="C1-Cycle">
</div>
<hr>
<div>
<input type="text" id="C2-Cycle-Cycle">
</div>
</body
</html>

＆＃13;

Answer 1

使用此脚本：

$(document).ready(function() {
      $.ajaxSetup({cache: false});
       var winterval=setInterval(function () {

            $.getJSON("sample.js", function (result) {
               var data=$.parseJSON(result);

               if (data.var1) {
                   $('#C1-Cycle').val(data.var1);
               }
               if (data.var2) {
                   $('#C2-Cycle-Cycle').val(data.var2);
               }
            });

       }, 1000);
  });

但请确保在sample.js文件中输入数据如：

{ “VAR1”： “1”， “VAR2”： “2”}

示例：https://jsfiddle.net/5881pnqn/2/

Answer 2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <title></title>
    <script>
        function validate() {
            debugger;

            var name = document.myForm.name.value;
            if (name == "" || name == null) {
                document.getElementById("span1").innerHTML = "Please enter the Name";
                document.myForm.name.focus();
                document.getElementById("name").style.border = "3px solid red";
                return false;
            }
            else {
                document.getElementById("span1").innerHTML = "";
                document.getElementById("name").style.border = "3px solid green";
            }

            var age = document.myForm.age.value;
            var ageFormat = /^(([1][8-9])|([2-5][0-9])|(6[0]))$/gm;

            if (age == "" || age == null) {
                document.getElementById("span2").innerHTML = "Please provide Age";
                document.myForm.age.focus();
                document.getElementById("age").style.border = "3px solid red";
                return false;
            }
            else if (!ageFormat.test(age)) {
                document.getElementById("span2").innerHTML = "Age can't be leass than 18 and greater than 60";
                document.myForm.age.focus();
                document.getElementById("age").style.border = "3px solid red";
                return false;
            }
            else {
                document.getElementById("span2").innerHTML = "";
                document.getElementById("age").style.border = "3px solid green";
            }

            var password = document.myForm.password.value;
            if (document.myForm.password.length < 6) {
                alert("Error: Password must contain at least six characters!");
                document.myForm.password.focus();
                document.getElementById("password").style.border = "3px solid red";
                return false;
            }
            re = /[0-9]/g;
            if (!re.test(password)) {
                alert("Error: password must contain at least one number!");
                document.myForm.password.focus();
                document.getElementById("password").style.border = "3px solid red";
                return false;
            }
            re = /[a-z]/g;
            if (!re.test(password)) {
                alert("Error: password must contain at least one lowercase letter (a-z)!");
                document.myForm.password.focus();
                document.getElementById("password").style.border = "3px solid red";
                return false;
            }
            re = /[A-Z]/g;
            if (!re.test(password)) {
                alert("Error: password must contain at least one uppercase letter!");
                document.myForm.password.focus();
                document.getElementById("password").style.border = "3px solid red";
                return false;
            }
            re = /[$&+,:;=?@#|'<>.^*()%!-]/g;
            if (!re.test(password)) {
                alert("Error: password must contain at least one special character!");
                document.myForm.password.focus();
                document.getElementById("password").style.border = "3px solid red";
                return false;
            }
            else {
                document.getElementById("span3").innerHTML = "";
                document.getElementById("password").style.border = "3px solid green";

                createJSON();
            }
        }
        function createJSON() {
            debugger;
            var myData = $("#myTableData");
            var jsonData= JSON.stringify(myData.serializeArray());
            document.getElementById("span4").innerHTML = jsonData;
            console.log(jsonData);


        }
        function restrictCharacters(evt) {

            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (((charCode >= '65') && (charCode <= '90')) || ((charCode >= '97') && (charCode <= '122')) || (charCode == '32')) {
                return true;
            }
            else {
                return false;
            }
        }



        function clearForm() {
            document.getElementById("name").innerHTML = "";
            document.getElementById("age").innerHTML = "";
            document.getElementById("password").innerHTML = "";
        }
    </script>
</head>

<body>
    <div id="myForm">
        <h2>Registration Form</h2>
        <form id="myTableData" name="myForm" onsubmit="return(validate());">

            <table>

                <tr>
                    <th>Name</th>
                    <td><input type="text" name="name" placeholder="Name" id="name" class="information" onkeypress="return restrictCharacters(event);" /></td>
                    <td><span id="span1"></span></td>
                </tr>

                <tr>
                    <th>Age</th>
                    <td>
                        <input type="text" name="age" id="age" class="information" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));" placeholder="Age" /></td>
                    <td><span id="span2"></span></td>
                </tr>

                <tr>
                    <th>Password</th>
                    <td>
                        <input type="password" name="password" id="password" class="information" placeholder="Password" /></td>
                    <td><span id="span3"></span></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" name="button" value="Proceed" onclick="validate();" />

                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="span4"></span>
                    </td>
                </tr>

            </table>
        </form>
    </div>


</body>
</html>

使用json将值传递给文本框

2 个答案: