База данных запросов с Ajax и классическим ASP - PullRequest
Новая
       1

База данных запросов с Ajax и классическим ASP

1 голос
/ 17 мая 2011

Я пытаюсь изменить скрипт из w3scools, чтобы использовать комбинацию asp и ajax для запроса базы данных и возврата результатов.

Вот код: 

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
    var xmlhttp;    
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
    <select name="customers" onchange="showCustomer(this.value)">
        <option value="">Select a customer:</option>
        <option value="ALFKI">Alfreds Futterkiste</option>
    </select>
</form>
<br />

<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Я хотел бы заменить поле выбора двумя полями ввода.

Может кто-нибудь сказать мне, как изменить javascript, чтобы оба входных значения передавались вместе со строкой запроса, и что нужно изменить в форме для вызова функции.

Спасибо

Ответы [ 2 ]

2 голосов
/ 17 мая 2011

Это зависит от того, как именно вы хотите, чтобы страница работала. Можете ли вы быть более конкретным?

Когда вы говорите «входные значения», вы имеете в виду текстовое поле?

В следующем примере я предполагаю, что у вас будет два поля и кнопка для отправки: 

<form action=""> 
    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox1" />

    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox2" />

    <input type="button" onclick="showCustomer();" />
</form>

Определение вашей функции JavaScript изменится с 

function showCustomer(str)

до 

function showCustomer()

И вам нужно будет удалить любой связанный код str.

Чтобы подобрать эти значения, используйте document.getElementById: 

var val1 = document.getElementById("MyTextBox1").value);
var val2 = document.getElementById("MyTextBox1").value);
xmlhttp.open("GET","getcustomer.asp?q="+ val1 +"&r=" + val2 ,true);

Это очень грубо и готово, но хорошая отправная точка.

1 голос
/ 17 мая 2011

Зависит от того, как вы хотите это сделать. Прямо сейчас сам скрипт запускается событием изменения элемента select. Если вы замените этот элемент, вам потребуется другое событие для запуска сценария. Кнопка, возможно? Если это так, то, вероятно, самый простой способ сделать это с помощью jQuery: 

Field 1: <input id="text1" type="text" />
Field 2: <input id="text2" type="text" />
<input id="buttonSend" type="button" value="Send" />
<script type="text/javascript">
  $(document).ready(function() {
    $('#buttonSend').click(function() {
      $.get('getcustomer.asp?text1=' +
          $('#text1').val() + '&text2=' + $('#text2').val()
      );
    });
  });
</script>

Есть еще кое-что, что вы можете сделать с функцией $.get(), задокументированной здесь , которая на самом деле является просто сокращением для функции $.ajax(), документированной здесь . Первый короче, второй дает вам больше возможностей и контроля.

(Обратите также внимание, что если вы хотите использовать и другие библиотеки JavaScript, вы можете заменить псевдоним $ на jQuery в приведенном выше коде, чтобы избежать путаницы.)

Обратите внимание на то, что здесь преимущество состоит в том, что он отделяет скрипт (который может быть помещен в отдельный файл при необходимости) от разметки. В качестве общей парадигмы проектирования это обычно предпочтительнее синтаксиса onchange="someFunctionCall()" в разметке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...