带有表单数据的 Jquery .load()

Posted 2023-05-09

【中文标题】带有表单数据的 Jquery .load()

【英文标题】：Jquery .load() with data from form

【发布时间】：2011-08-23 16:55:58

【问题描述】：

我试图在提交表单后将页面加载到模式窗口“checkout.php”中，但我需要它来加载表单的结果。通常，只需将表单的操作设置为 url 并传递数据，但在这种情况下，页面需要使用该数据加载到模式中，这需要使用比我知道的更多的 jQuery。

html

<form id="shippingform" name="shippingform" method="post" action="#">
<table id="box-table-a"  border="1">
<thead>
    <tr>
        <th scope="col" >USPS Option</th>
        <th scope="col" >Price</th>
        <th scope="col"  style="text-align: right;">Select</th>
    </tr>
</thead>
<tbody>
<tr>
  <td class="first">Ground:</td>
  <td><?php echo "$" . sprintf("%01.2f", $groundTotal) ?></td>
  <td class="last"><input name="shipping" type="radio" id="radio" value="<?php echo $groundTotal ?>" checked="checked" /></td>
</tr>
<tr>
  <td class="first">Priority:</td>
  <td><?php echo "$" . sprintf("%01.2f", $priorityTotal) ?></td>
  <td class="last"><input type="radio" name="shipping" id="radio2" value="<?php echo $priorityTotal ?>" /></td>
</tr>
<tr>
  <td class="first">Express:</td>
  <td><?php echo "$" . sprintf("%01.2f", $expressTotal) ?></td>
  <td class="last"><input type="radio" name="shipping" id="radio3" value="<?php echo $expressTotal ?>" /></td>
</tr>
</tbody>
</table>
<a href="#" onclick="totalCalc()">submit</a>
</form>

JS

<script language="javascript">
function totalCalc() 
$('#cartdialog').load("/ash/shop/checkout.php");

</script>

我上面的内容将在单击表单的提交按钮后将 checkout.php 页面加载到模式中。我不是在问为什么页面没有加载与表单一起发送的信息。我完全理解我在这里所做的只是执行一个函数来将“checkout.php”加载到模态的 div 中。我需要有人向我解释如何编辑我的函数，以便加载“checkout.php”，就像它是表单的操作一样，数据将被传递。

提前感谢您的帮助！

在下面编辑

<form id="shippingform" name="shippingform" method="post" action="#">

JS

$('#shippingform').submit(function(event)
var data = $(this).serialize();
$.post('/ash/shop/checkout.php', data)
    .success(function(result)
        $('#cartdialog').html(result);
    )
    .error(function()
        console.log('Error loading page');
    )
return false;
);

CHECKOUT.PHP 页面将输入称为“运费”

<?php 
//total up price of all items
$subtotal = ($subtotal + ($row_rsMyCart['price'] * $row_rsMyCart['quantity']));
$myTotal = ($subtotal + $_POST['shipping']);

 while ($row_rsMyCart = mysql_fetch_assoc($rsMyCart)); ?>
</table>
<p>
<?php
//development
echo "<br>";
echo "Subtotal: $" . sprintf("%01.2f", $subtotal);
echo "<br>";
echo "Total: $" . sprintf("%01.2f", $myTotal);
?>
</p>

【问题讨论】：

可能重复：***.com/questions/1218245/… 问题不完全相同，但答案相同，这就是为什么我将其标记为重复。

【参考方案1】：

绑定到表单上的提交事件，而不是使用 onClick 属性。

提交时，序列化表单值，发布到您的 url 并将结果插入目标 div。

$('#myform').submit(function(event)
    var data = $(this).serialize();
    $.post('/ash/shop/checkout.php', data)
        .done(function(result)
            $('#cartdialog').html(result);
        )
        .fail(function()
            console.log('Error loading page');
        )
    return false;
);

编辑1：给定你的html，你需要替换

<a href="#" onclick="totalCalc()">submit</a> 

与

<input type="submit" name="submit" value="Submit">

【讨论】：

@robcowie @mattball 似乎这两个非常接近并且正在做同样的事情。我正在向站点根目录吐出这样的数据：www.siteroot.com/?shipping=19.32 最终目标是加载位于 www.siteroot.com/ 的“checkout.php” ash/shop/checkout.php 与模式内的数据。我一直在使用 .load() 在模态中加载页面的内容

@robcowie 更近，但仍然没有雪茄...这实际上导致页面在“checkout.php”上重新加载，而我需要做的只是用“重新加载 div #cartdialog 的内容” checkout.php" 此外，它会将数据附加到 URL 的末尾，通常表单会发布，"checkout.php" 将加载提交的数据，并且 url 中不会有任何额外内容

@livinzlife：我已经修复了我的答案中的一个错误，所以再试一次。至于查询字符串， .post() 不会导致这种情况发生。确保你删除了你原来的 totalCalc() 函数（或者确保它没有被调用）。

@robcowie 抱歉，我没有意识到我无法将代码放入 cmets。我编辑了我的原始帖子。我修复了表单，使用了常规的表单提交按钮，并摆脱了 totalCalc()。现在我的模态窗口消失了，什么也没有发生。 checkout.php页面没有加载到#cartdialog div中，不知道如何查看表单是否提交

我想指出，jQuery API 已更改，不再支持 .success() 和 .error()。它们已被.done() 和.fail() 取代

【参考方案2】：

使用$.post() 使用ajax 提交表单。

$('#shippingform').submit(function ()

    var $this = $(this);

    $.post('/ash/shop/checkout.php',
    
        data: $this.serialize()
    , function (response)
    
        $('#cartdialog').html(response);
    );

    return false;
);

【讨论】：

在上面的例子中，它应该只是 $this.serialize() 作为数据参数，而不是 data: $this.serialize()