在HTML上提交时阻止刷新

Prevent refreshing when submitting on HTML

本文关键字：刷新 提交 HTML      更新时间：2024-04-22

我正在做一个HTML项目。它通过API和jQuery获得股票价格。但是，当我尝试使用<form>属性提交时，它会刷新页面。如何防止刷新？

addStock（）；执行一个简单的jQuery请求。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Stock Market Game PRE ALPHA BETA</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form onsubmit="addStock()">
    </form>

    <input type="text" name="stock">
    <br>
    <br>
    <input type="submit" value="Get Price">
  </body>

我的其余代码和addStock（）

</html>

如果你想要我的addStock（）代码，这就是：

<script>
    var Market = {};
    var Stocks = [];
    Market.GetQuote = function(ssymbol, fCallback) {
        this.symbol = ssymbol;
        this.fCallback = fCallback;
        this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
        this.makeRequest();
    }
    Market.GetQuote.prototype.handleSuccess = function(jsonResult) {
        this.fCallback(jsonResult);
    }
    Market.GetQuote.prototype.handleError = function(jsonResult) {
        console.error(jsonResult);
    }
    Market.GetQuote.prototype.makeRequest = function() {
        //Abort any open requests
        if (this.xhr) {
            this.xhr.abort();
        }
        //Start a new request
        this.xhr = $.ajax({
            data: {
                symbol: this.symbol
            },
            url: this.DATA_SRC,
            dataType: "jsonp",
            success: this.handleSuccess,
            error: this.handleError,
            context: this
        });
    };
    function addStock() {
        var xForm = document.forms[0];
        var xField = xForm.elements[0];
        alert("Stock: " + xField.value);
        Stocks.push(new Market.GetQuote(xField.value.toString(), function jsonResult() {
            //Gotta catch all the errors
            if (!jsonResult || jsonResult.Message) {
                console.error("Error: ", jsonResult.Message);
                return;
            }
            //If it works lets return that json!
            return jsonResult;

        }));
        alert(new Market.GetQuote(xField.value, function jsonResult() {
            if (!jsonResult || jsonResult.Message) {
                console.error("Error: ", jsonResult.Message);
                return;
            }
            console.log(jsonResult);
            return jsonResult[2];
        }));

      new Markit.QuoteService(xField.value, function (jsonResult) {
//Catch errors
if (!jsonResult || jsonResult.Message) {
    console.error("Error: ", jsonResult.Message);
    return;
}
//If all goes well, your quote will be here.
console.log(jsonResult);
/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
});
    };
</script>

尝试用附加到input type="submit"的.on( events [, selector ] [, data ], handler )替换事件属性onsubmit，其中events是"click"；在handler中使用Event.preventDefault()来防止form提交的默认操作

见4.10.22.3表格提交算法

每个form元素都有一个计划导航，该导航要么为null，要么为任务首次创建form时，其计划导航必须设置为null。在下面描述的行为中，当用户代理需要计划导航到特定资源目的地必须运行以下步骤：

  1. 如果表单有非空的计划导航，请将其从任务队列。

  2. 让表单的计划导航成为一项新任务，包括运行以下步骤：

    1. 让表单的计划导航为空。

    2. 将目标浏览上下文导航到目的地。如果replace为true，则必须使用replace导航目标浏览上下文已启用。

    出于此任务的目的，目标浏览上下文和替换是在整个表单提交时设置的变量算法已经运行，它们的值与计划时的值一致导航已排队。

    1. 对作为表单新计划导航的任务进行排队

此任务的任务源是DOM操作任务源。

行为如下：

更改操作URL让查询是使用应用程序/x-www-form-urlencoded编码对表单数据集进行编码的结果算法，解释为US-ASCII字符串。

将已解析操作的查询组件设置为查询。

让destination是通过应用URL序列化程序形成的新URL算法解析动作。

计划导航到目的地。

html

<form>    
    <input type="text" name="stock">
    <br>
    <br>
    <input type="submit" value="Get Price">
</form>

jQuery

$("input[type=submit]").on("click", function(event) {
  event.preventDefault();
  addStock()
})
相关文章：