Отправка массива с помощью jquery post

ProgramBox

Отправка массива с помощью jquery post

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#php #jquery #arrays

#php #jquery #массивы

Вопрос:

У меня есть страница php, которая содержит массив полей ввода, расположенных в таблице. Каждая строка содержит информацию о каждом члене фонда. и разные столбцы относятся к деньгам, выплаченным ими под разными заголовками. Я хочу использовать это для обновления таблицы mysql, которая содержит учетные записи пользователей. Как создать из этого массив и отправить post-запрос с помощью jquery?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript">


jQuery.noConflict();
jQuery.validator.setDefaults({
    submitHandler: function () {

        //create an array of values in each row
        jQuery.post("scripts/update.php", {

            //send array to the script
        }, function (data) {

            alert(data);
        });
    }
});



</script>

</head>

<body>
<form id="form1" name="form1" action="">
<table><tr><th>Mem No.</th><th>Subcription</th><th>Loan</th><th>Interest</th></tr>
<tr><td>
<input type="text" id="memberno1"  value="1001"/></td><td><input type="text" id="sub1" /></td><td><input type="text" id="loan1"/></td><td> <input type="text" id="int1" /></td></tr>

<tr><td>
<input type="text" id="memberno2"value="1002" /></td><td><input type="text" id="sub2" /></td><td><input type="text" id="loan2"/></td><td> <input type="text" id="int2" /></td></tr>
<tr><td>
<input type="text" id="memberno3" value="1003"/></td><td><input type="text" id="sub3" /></td><td><input type="text" id="loan3"/></td><td> <input type="text" id="int3" /></td></tr>
<tr><td>
<input type="text" id="memberno4" value="1004"/></td><td><input type="text" id="sub4" /></td><td><input type="text" id="loan4"/></td><td> <input type="text" id="int4" /></td></tr>
<tr><td>
<input type="text" id="memberno5" value="1005"/></td><td><input type="text" id="sub5" /></td><td><input type="text" id="loan5"/></td><td> <input type="text" id="int5" /></td></tr>
<tr><td>
<input type="text" id="memberno6" value="1006"/></td><td><input type="text" id="sub6" /></td><td><input type="text" id="loan6"/></td><td> <input type="text" id="int6" /></td></tr>
<tr><td>
<input type="text" id="memberno7" value="1007"/></td><td><input type="text" id="sub7" /></td><td><input type="text" id="loan7"/></td><td> <input type="text" id="int7" /></td></tr></table>
<input type="submit" valueue="Save" id="submit"/>
</form>
</html>

1. Формы отправляют свои данные в парах имя / значение. Каждому из ваших элементов управления требуется имя — замените id= на name = . Если вы хотите использовать массивы для передачи данных, тогда используйте name=’int[]’, поскольку php обработает эти массивы.

Ответ №1:

Что ж, выполните итерацию по всем строкам таблицы и для каждой выполните итерацию по всем полям ввода:

 var arr = $('#form1 tr:gt(0)').map(function() {
    return [$('input', this).map(function() {
        return this.value;
    }).get()];
}).get();

ДЕМОНСТРАЦИЯ

Одно предостережение заключается в том, что вы должны полагаться на порядок каждого поля.

1. Я проверил демо и не получил выходных данных. Я попробовал то же самое в своем скрипте, но возвращенный массив представлял собой разделенные запятыми значения всех полей ввода, а не многомерный массив

2. @mansoondreamz Я думаю, что вы запустили его с первой версией моего ответа, потому что код, написанный выше, выдает многомерный массив.

3. Я использовал приведенный выше код без каких-либо изменений. Смотрите это jsbin.com/netayaga/2/edit Если я ввожу некоторые значения, он не принимает

4. Хорошо, я понял это и отправлю обратно результат

Ответ №2:

Вам нужно создать пустой массив array и поместить туда все входные данные, а затем использовать его в своем сообщении. Что-то вроде этого:

 jQuery.noConflict();
jQuery.validator.setDefaults({
    submitHandler: function () {

        var inputArray = [];

        $('#form').find('input[type=text]').each(function() {
            // get the value or something from each input

            inputArray.push($(this).val());
        })

        //create an array of values in each row
        jQuery.post("scripts/update.php", {
            'inputs' : inputArray //send array to the script
        }, function (data) {
            alert(data);
        });
    }
});

Вы должны получить inputs в виде массива значения из ваших входных текстов. Надеюсь, это поможет

Ответ №3:

используйте jQuery.post(url, данные, обратный вызов)

Используя serialize, вы можете отправить всю форму автоматически.

    jQuery.post("scripts/update.php", 
              $("form#form1").serialize(), 
              function (data) {
                 alert(data);
              });

Ответ №4:

 $.ajax({
 url: 'ajax-post-url.php',
 type: 'POST', // or GET method
 dataType: 'json',
 data: $('.form').serialize(), // all data
 success: function(response) {
    console.log(response);
 }
});

или

 $.post('ajax-post-url.php', $('.form').serialize(), function(response) {
 console.log(response);
});