如何在没有刷新验证的情况下传递AJAX中的值

Question

这里我希望在所有值通过AJAX传递下一页之后进行文件验证，所以尝试这样但我无法得到正确的答案，假设选择城市字段并单击按钮meaans页面令人耳目一新但我的条件不要＆＃ 39; t想要刷新页面怎么做？

＆＃13;

＆＃13;

function validateForm() {
		    var city = document.forms["myForm"]["city"].value;
		     if (city == null || city == "") {
		       document.getElementById("state_err").innerHTML = "Select Your State";
			   return false;
		    }
			else{
			$.ajax({
			url:'search_truck.php',
			type:'POST',
			data : { 'state_id' : city},
			success:function(data){
				//var res=jQuery.parseJSON(data);// convert the json
				console.log(data);
			},
			});
            //return true;
             /*var formData = new FormData();
             var formData = new FormData($('#newUserForm')[0]);
             formData.append('file', $('input[type=file]')[0].files[0]);*/
			}
		}

＆＃13;

<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data" >
                <div class="col-md-4">
                   <select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer">
                        <option value="">Select City</option>
                        <?php
                        include("dbconfig.php");
                        $sql = mysql_query("SELECT * FROM state_list");
                        while($row=mysql_fetch_assoc($sql)){
                        ?>
                        <option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option>
                    <?php } ?>
                  </select>&nbsp;&nbsp;<span id="state_err"></span>

                </div>
				<div class="col-md-4">
				  <select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;">
                     <option value="">Select Area</option>
                   </select>
                </div>
                <div class="col-md-2">
				<button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button>
                </div>
				</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您想使用preventDefault（）;

因此，在提交时获取表单并将事件传递给回调。然后对变量调用preventDefault（）。

因为您要将数据发送到服务器，为什么不在那里验证它然后返回错误？

$('#basicForm').submit(function (e) {
    e.preventDefault();
    validateForm();
});

function validateForm() {
    var city = document.forms["myForm"]["city"].value;
    if (city == null || city == "") {
        document.getElementById("state_err").innerHTML = "Select Your State";
        return false;
    }
    else {
        $.ajax({
            url: 'search_truck.php',
            type: 'POST',
            data: {'state_id': city},
            success: function (data) {
                //var res=jQuery.parseJSON(data);// convert the json
                console.log(data);
            },
        });
        //return true;
        /*var formData = new FormData();
         var formData = new FormData($('#newUserForm')[0]);
         formData.append('file', $('input[type=file]')[0].files[0]);*/
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
    <div class="col-md-4">
        <select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer">
            <option value="">Select City</option>
            <?php
                        include("dbconfig.php");
                        $sql = mysql_query("SELECT * FROM state_list");
                        while($row=mysql_fetch_assoc($sql)){
                        ?>
            <option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option>
            <?php } ?>
        </select>&nbsp;&nbsp;<span id="state_err"></span>

    </div>
    <div class="col-md-4">
        <select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;">
            <option value="">Select Area</option>
        </select>
    </div>
    <div class="col-md-2">
        <button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button>
    </div>
</form>