Javascript 在两个文档脚本之间传递变量_Javascript_Php_Jquery_Json

Javascript 在两个文档脚本之间传递变量

javascript php jquery json

Javascript 在两个文档脚本之间传递变量,javascript,php,jquery,json,Javascript,Php,Jquery,Json,我试图创建一个下拉列表，它由一个php数据库调用组成，该调用以json格式返回值。第一个函数jsonload的作用是返回这个json的两个字段，它们包装在一个字段中。然后我想做的是将其作为变量传递到子函数optionLoadofFunction表单中。将其添加为字符串的位置。这将给我该行的下拉列表，然后当我添加其他行时，下拉列表已经完成 <!doctype html> <html> <head> <meta charset="UTF-8"> &l

我试图创建一个下拉列表，它由一个php数据库调用组成，该调用以json格式返回值。第一个函数jsonload的作用是返回这个json的两个字段，它们包装在一个字段中。然后我想做的是将其作为变量传递到子函数optionLoadofFunction表单中。将其添加为字符串的位置。这将给我该行的下拉列表，然后当我添加其他行时，下拉列表已经完成

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Form</title>
</head>

<body>
<form name="codexworld_frm" id="form1" method="post">
<div class="field_wrapper">
<div>
    <h3><a href="javascript:void(0);" class="add_button" title="Add Field">Add POS Item</a>    </h3>
</div>
</div>
<input type="submit" value="Submit">
</form>
</body>
<script type="text/javascript">
    // JavaScript Document
    var globalVariable;
$(document).ready(function jsonload(data){
    $.getJSON("http://localhost/test/php/psql.php", function(data)
             {
        var options = "";
        for (var i = 0; i < data.length; i++)
            {
                options +="<option value=\"" + data[i].POSID + "\">" +  data[i].Product + "</option>";
                //console.log(data[i].POSID + " " + data[i].Product);
            }

        var globalVariable=options;
        console.log(globalVariable);
    });
}); 


$(document).ready(function forms(){
        var maxField = 50; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        //var fieldHTML = {row :function(f){
                         //return '<h3><div>Item <input type="text" name="field_name['+f+'][]" value=""/>Material <input type="text" name="field_name['+f+'][]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove Field"><i class="material-icons" style="font-size:24px; color:blue">remove_circle</i></a></div></h3>';
                        //}};
        var fieldHTML = {row :function optionload(f){
            var local = globalVariable;
            console.log(local);
            //event.preventDefault();
                         return '<div>Item<input type="text" name="field_name['+f+'][]" value=""/>Material <select name="field_name['+f+'][]"><option value=""></option>' + local + '</select><a href="javascript:void(0);" class="remove_button" title="Remove Field"><i class="material-icons" style="font-size:24px; color:blue">remove_circle</i></a></div>';
        }};
        var x = 1; //initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){
                x++;
                $(wrapper).append(fieldHTML.row(x)); //Add field html
            }
            });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
                      e.preventDefault();
        $(this).parent('div').remove(); //remove field html
        x--;
        });
});
    </script>

    </html>

我是一名初学者，非常感谢您对我的帮助。

这里有一些问题

首先，您要在全局范围内创建一个变量
globalVariable
，以便将数据从一个函数传输到另一个函数：

//JavaScript Document var globalVariable;
但是，您随后在
$.getJSON（）
回调函数的范围内声明另一个名为
globalVariable
的变量（通过使用
var
关键字），并将
选项的值分配给该变量。。。不是全局范围中的变量： var globalVariable=options; 您的全局globalVariable 从未实际获得分配给它的任何内容 Second，虽然如果$.getJSON（）返回速度足够快，代码可能会工作，$.getJSON（）是一个异步函数，这意味着其他代码，如$（文档）.ready（）回调将在调用$.getJSON（）后继续执行。如果您请求http://localhost/test/php/psql.php 返回需要几秒钟，用户可能已经单击了添加按钮，但您的选项可能还不可用您可能应该等到json 数据返回后，再将单击处理程序绑定到按钮这也可以在不使用全局变量的情况下实现：将您的forms（）函数移出$（文档）。ready（）将$.getJSON（）回调函数中的逻辑放入forms（）函数中允许forms（）获取参数data 使窗体成为您的$.getJSON（）回调函数去掉globalVariable 和local ，改用选项 $（document）.ready（函数jsonload（）{ $.getJSON（“http://localhost/test/php/psql.php“、表格）； }); 函数形式（数据）{ //之前在getJSON回调中 var期权=”；对于（变量i=0；i 有几个问题首先，您要在全局范围内创建一个变量globalVariable ，以便将数据从一个函数传输到另一个函数： //JavaScript Document var globalVariable; 但是，您随后在$.getJSON（）回调函数的范围内声明另一个名为globalVariable 的变量（通过使用var 关键字），并将选项的值分配给该变量。。。不是全局范围中的变量： var globalVariable=options; 您的全局globalVariable 从未实际获得分配给它的任何内容 Second，虽然如果$.getJSON（）返回速度足够快，代码可能会工作，$.getJSON（）是一个异步函数，这意味着其他代码，如$（文档）.ready（）回调将在调用$.getJSON（）后继续执行。如果您请求http://localhost/test/php/psql.php 返回需要几秒钟，用户可能已经单击了添加按钮，但您的选项可能还不可用您可能应该等到json 数据返回后，再将单击处理程序绑定到按钮这也可以在不使用全局变量的情况下实现：将您的forms（）函数移出$（文档）。ready（）将$.getJSON（）回调函数中的逻辑放入forms（）函数中允许forms（）获取参数data 使窗体成为您的$.getJSON（）回调函数去掉globalVariable 和local ，改用选项 $（document）.ready（函数jsonload（）{ $.getJSON（“http://localhost/test/php/psql.php“、表格）； }); 函数形式（数据）{ //之前在getJSON回调中 var期权=”；对于（变量i=0；i