Как использовать результаты ajax в другой части HTML-страницы - PullRequest
Новая
       3

Как использовать результаты ajax в другой части HTML-страницы

1 голос
/ 17 июня 2011

Я создаю страницу, которая представляет список ветвей магазина.
Первая ветка обязательна, поэтому ее поля жестко запрограммированы на странице.
Если в БД есть больше ветвей дляПользователь, чем страница, будет строить необходимые строки при загрузке.
Итак, если это мой текущий код: 

<html>
<head>
<script type="text/javascript">
    function initialize(){
        $.ajax({
            type: "POST",
            url: "ajaxCalls.php",
            dataType: "json",
            data: ({'storeId' : storeId}),
            success: function(storeBranches){
            ...
            }
        });
    }
</script>
</head>

<body onload="initialize()">  
<table>
    <tr>Main Branch:</tr>
    <tr>
    <th>Branch Name</th>
    <th>Branch Address</th>
    </tr>
    <tr>
    <td><input id="firstName" type="textbox" value=""></td>
    <td><input id="firstAddress" type="textbox" value=""></td>
    </tr>
</table> 

<br/>

<table border="1" cellspacing="10">
    <tr>Secondary Branches:</tr>
    ...

У меня есть два вопроса:

  1. После получениямассив ветвей с вызовом ajax, как передать имя и адрес первого элемента в массиве в поля в теле (firstName и firstAddress)?
  2. Как я могу динамически создавать дополнительные строки в соответствии с количеством ветвей в массиве (конечно, -1 для первой ветви) и заполнять их информацией об имени и адресе?

1 Ответ

1 голос
/ 17 июня 2011

  1. для того, чтобы вставить значения в «firstName» и «firstAddress», вам нужно получить их, используя javascript.Если вы используете jQuery, как в предыдущем примере, подойдет простой $('#firstName')[0].value = "YourValue";.

  2. Динамическое создание элементов DOM также довольно просто в jQuery: вам нужно вставить его в другойэлемент (в вашем примере - тело страницы).Это делается как $(document.body).append('<table><tr><td>Branch Name:</td><td>' + yourBranchName + '</td></tr></table>');, так как HTML - это строка, вы можете вставить свои собственные данные в нее (например, в '<input name="branchName7" value="' + yourSeventhBranchName + '" />', конечно, вам нужно очистить ваши строки. Подробнее здесь: http://api.jquery.com/category/manipulation/dom-insertion-inside/

...