javascript - 如何在 PHP foreach 中使用 ajax？

Question

我有一个带有两个选择 html 标签和一个输入提交的表单。为了填充选项标签的值并显示所选选项标签的等效值，我使用 PHP，请参阅下面的代码片段。

现在，我想通过 JS 使用 AJAX 来避免在用户单击按钮时重新加载浏览器。但我不知道怎么办。请帮助我

这是 link

片段:

if(isset($_POST['mall_list'])){
    $mall_list= $_POST['mall_list'];
    $malls= $wpdb->get_results($wpdb->prepare("SELECT stores FROM tablename WHERE malls = '" . $mall_list. "' GROUP BY stores ORDER BY stores", OBJECT));

    echo '<div class="\record\">';
    foreach ($malls as $record){
        echo '<div>' . $record->stores . '</div>';
    }
    echo '</div>';

} elseif(isset($_POST['store_list'])){
    $store_list= $_POST['store_list'];
    $stores= $wpdb->get_results($wpdb->prepare("SELECT malls FROM tablename WHERE stores= '" . $store_list. "' GROUP BY malls ORDER BY malls", OBJECT));

    echo '<div class="\record\">';
    foreach ($stores as $record){
        echo '<div>' . $record->malls. '</div>';
    }
    echo '</div>';
}

Answer 1

HTML

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
    First Name: <input type="text" name="fname" value =""/> <br/>
    Last Name: <input type="text" name="lname" value ="" /> <br/>
    Email : <input type="text" name="email" value=""/> <br/>
</form>

JavaScript

//callback handler for form submit
$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            //data: return data from server
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            //if fails      
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
});

$("#ajaxform").submit(); //Submit  the FORM