Question

我是Ajax的新手，所以需要一些帮助，至少开始使用代码。

因此，我想，我试图实现的目标相当普遍。我有2个下拉框，引用我的数据库，这些被称为＆＃34; area＆＃34;和＆＃34;度假＆＃34;。我的想法是，当我从第一个框中选择区域时，它仅在第二个框中显示该区域内的度假区。

这是我的表格：

<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
    <div class="span3">
    <label>Area:</label>
        <select name="area">
            <option value="">Any</option>
                @foreach(var row in qlistarea){
                    <option value="">@row.AreaName</option>
                }
        </select>
    </div>
    <div class="span3">
    <label>Resort:</label>
        <select name="resort">
            <option value="">Any</option>
                @foreach(var row in qlistresort){
                    <option value="">@row.ResortName</option>
                }
        </select>
    </div>
    <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
 </form>
</div>

我认为查看我当前的SQL代码可能很有用：

var listarea = "SELECT DISTINCT AreaName FROM ResortInfo";
var qlistarea = db.Query(listarea);

var listresort = "SELECT DISTINCT ResortName FROM ResortInfo";
var qlistresort = db.Query(listresort);

我猜测我需要以某种方式添加＆＃34; + WHERE AreaName =某事＆＃34;到第二个查询，取决于AJAX调用的结果吧？

谢谢，加文

Answer 1

好的，您使用的是Razor语法？让节目开始。嘿，你们不是同一个人吗？

首先，我将告诉你我使用的基本知识。

我使用了click keyup或change个事件。
我在ajax调用上更新了正文的内容。
你需要一些基本的教程伙伴！学习ASP.NET，然后学习jQuery Ajax！那很简单。

我向你提出的谦卑要求：

Buddy请至少搜索一下代码，然后再将其粘贴到此处。您将获得大量的downvotes，可能会被阻止在此处发布更多问题。请先搜索问题。不过这是代码。

好的，创建代码：

我将发布适合我的代码。好？

以下是主要页面内容：

@{
Layout = "~/_SiteLayout.cshtml";
}

<script>
  $(document).ready(function () {
    $('#area').change(function () {
        $.ajax({
            url: "testtworesult",
            data: "type=resortupdate&resval=" + $('#area').val(),
            success: function (data) {
                $('#resort').html(data);
            }
        });
    });
      $('.btn').click(function () {
        $.ajax({
            url: "testtworesult",
            data: "type=submit&area=" + $('#area').val() + "&res=" + 
            $('#resort').val(),
            success: function (data) {
                $('#result').html(data);
             }
          });
       });
     });
  </script>

 <div id ="homepage-form-div" class="row">
  <div class="span3">
  <label>Area:</label>
     <select id="area">
         <option value="">Any</option>
           <option value="1">One</option>
         <option value="2">Two</option>
     </select>
  </div>
  <div class="span3">
 <label>Resort:</label>
     <select id="resort">
         <option value="">Any</option>
             <option value="Love">Love</option>
         <option value="Hate">Hate</option>
     </select>
  </div>
  <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
  <div style="font-weight: bold; margin-top: 20px;" id="result"></div>
</div>

然后是ajax页面：

@{
var db = Database.Open("StayInFlorida");

var getresortval = Request.QueryString["resval"];
var type = Request.QueryString["type"];
var res = Request.QueryString["res"];
var area = Request.QueryString["area"];

var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = '@0'";
var qlistresort = db.Query(listresort, getresortval);

if(type == "resortupdate") {
    if(getresortval == "Kissimmee") {
    Response.Write ("<option value='kissimmee'>Kissimmee</option");
    }
    if(getresortval == "Davenport") {
    Response.Write("<option value='davenport'>Davenport</option");
    }
} else if(type == "submit") {
Response.Write(@"You selected the Resort!<br>
Your area was: " + area + @".<br>
And your resort was: " + res + @". Hope you have a great trip!");
}
}

这不会保存数据库中的内容，您需要使用INSERT INTO。然后，您需要SELECT * FROM来选择数据。我只使用了Response.Write()。

Answer 2

对于AJAX调用，您需要一个AJAX可以调用的函数，该函数在用户选择区域后调用Resort查询。我不熟悉Razor或Webmatrix，所以这里有一个伪函数（基于PHP），你可以将它翻译成你的环境：

if (isset($_POST['area'])) set_resort();    /*AJAX will set $_POST['area'], then do function that returns output to AJAX*/

. . .

function set_resort() {
    var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = " $_POST['area'];    /*make sure you escape that variable, however you do that in your syntax*/
    var qlistresort = db.Query(listresort);
    var resortArray = array();    /*or however you make arrays in your syntax*/
    @foreach(var row in qlistresort){
        resortArray[] = @row.ResortName;    /*append each resort name to array*/
    }
    echo json_encode(@resortArray);    /*JSON is preferred way to echo array back to AJAX*/
}

您的 HTML 看起来像......

<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
    <div class="span3">
    <label>Area:</label>
        <select id="areaSelect" name="area"> <!-- add an ID for easier jQuery selection -->
            <option value="">Any</option>
                @foreach(var row in qlistarea){
                    <option value="">@row.AreaName</option>
                }
        </select>
    </div>
    <div class="span3">
    <label>Resort:</label>
        <select id="resortSelect" name="resort"> <!-- add an ID for easier jQuery selection -->
            <option value="">Any</option>  
        </select>
    </div>
    <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
 </form>
</div>

最后，你的 jQuery AJAX调用将是：

$('#areaSelect').on('change', function() {
    var str = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: /*URL of your page*/
        dataType: 'json',
        data: str,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown + '\n' + textStatus);
        },
        success: function(msg) {
            $.each(msg, function(index, value) {
                $('#resortSelect').append('<option value=' + index + '>' + value + '</option>';    /*add each resort from the set_resort() query to the resort select input*/
            });
    });
});

需要Ajax JavaScript代码 - 更新选择框 - Webmatrix

2 个答案: