javascript - 在 javascript 函数中调用 JQuery HTTP GET 请求

Question

首先我会说我是 Javascript 和 JQuery 的新手。我想要完成的是在 HTML 页面上有一个提交按钮，它将调用我的 .js 文件中的 dbQuery 函数，该函数将变量的值打印到屏幕上，然后将它们添加到 MySQL 数据库中。

我需要使用在我的第一个函数 dbQuery 中定义的 JavaScript 变量 selectedVisibleValue 我想这样做的原因是因为我有四个下拉菜单，其中三个这是隐藏的下拉菜单，仅根据第一个非隐藏的下拉菜单显示，只有一个隐藏的下拉菜单是可见的。

我想在我的 PHP 页面 formPage 中使用这些变量来执行数据库功能。我的代码如下 我想将 testing1 函数添加到 dbQuery 函数中。

我试过将它复制并粘贴到 dbQuery 函数中，但它不起作用。我没有尝试在下面的代码中使用 selectedVisibleValue。我只是想用一些虚假变量做一些测试。

    var dbQuery = function(){
    var description = document.getElementById("jobDescription").value;
    var selectedEquip = document.getElementById("equipmentList");
    var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
    var selectedVisibleValue = $(".unitDropDowns select:visible").val();
    document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
    document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>" + "<h3>Unit Number</h3>" + "<p>" + selectedVisibleValue + "</p>";
    document.getElementById("equipmentRan").style.display = "block";
    document.getElementById("descriptionSummary").style.display = "block";
}

var testing1 = function() {
    $.get(
        "formPage.php",
     {paramOne : 123, paramX : 'abc'},
     function(data) {
     document.getElementById("equipmentRan").innerHTML = ('page content: ' + data);
    }
);
}

Answer 1

//cache references to static elements
var jobDescription = $('#jobDescription')
  , selectedEquip = $('#equipmentList')
  , descriptionSummary = $('#descriptionSummary')
  , equipmentRan = $('#equipmentRan')
  ;    


function dbQuery(){

    //gather params    
    var params = {
        jobDescription : jobDescription.val(),
        selectedEquip1 : selectedEquip.val(),
        selectedVisibleValue = $(".unitDropDowns select:visible").val()
    }

    //show summary
    descriptionSummary.html('<h3>Description</h3><p>'+description+'</p></h3>').show();
    equipmentRan.html('<h3>Equipment Ran</h3><p>'+selectedEquip1+'</p><h3>Unit Number</h3><p>'+selectedVisibleValue+'</p>').show();

    //do a get
    $.get('formPage.php',params,function(data) {
        equipmentRan.html('page content: ' + data);
    }

}