个人中心
gpt4 book ai didi

javascript - 在 HTML 上提交时防止刷新

转载 作者：行者123 更新时间：2023-12-03 07:13:31 24 4
gpt4 key购买 nike

我正在开发一个 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>

最佳答案

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

参见4.10.22.3 Form submission algorithm

Each form element has a planned navigation, which is either null or a task; when the form is first created, its planned navigation must be set to null. In the behaviours described below, when the user agent is required to plan to navigate to a particular resource destination, it must run the following steps:

  1. If the form has a non-null planned navigation, remove it from its task queue.

  2. Let the form's planned navigation be a new task that consists of running the following steps:

    1. Let the form's planned navigation be null.

    2. Navigate target browsing context to destination. If replace is true, then target browsing context must be navigated with replacement enabled.

    For the purposes of this task, target browsing context and replace are the variables that were set up when the overall form submission algorithm was run, with their values as they stood when this planned navigation was queued.

    1. Queue the task that is the form's new planned navigation.

The task source for this task is the DOM manipulation task source.

The behaviours are as follows:

Mutate action URL Let query be the result of encoding the form data set using the application/x-www-form-urlencoded encoding algorithm, interpreted as a US-ASCII string.

Set parsed action's query component to query.

Let destination be a new URL formed by applying the URL serialiser algorithm to parsed action.

Plan to navigate to destination.

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()
})

关于javascript - 在 HTML 上提交时防止刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36521403/

24 4 0
文章推荐： javascript - 尝试用responseText替换行的innerhtml
文章推荐： javascript - Axios 将 index.html 内容返回给前端(React.js)
文章推荐： javascript - embed.fields[1].value : Must be 1024 or fewer in length. embed.fields[2].value: 长度必须为 1024 或更少
文章推荐： javascript - 仅在上传时显示图像(xhr.addEventListener)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com