javascript - 在不重新加载 html 页面的情况下显示消息

Question

我有一个 html 表单，其中包含姓名、电子邮件、联系方式和反馈字段以及提交按钮。

我的html表单代码是

<div class="feedback">
    <a id="feedback_button">Feedback</a>
    <form method="post" action="http://localhost:12459/WebsiteForm/WebSiteFeedbackProcessing.aspx"
    name="new_post">
    <div class="form">
        <div>
            <div>
                <input type="text" class="text_field" id="fname" name="fname" placeholder="First Name"
                    style="margin-bottom: 3px; width: 50%;" maxlength="20" />
            </div>
            <div>
                <input type="text" class="text_field" id="email" name="email" placeholder="Email"
                    style="margin-bottom: 3px; width: 50%;" maxlength="30" />
            </div>
            <div>
                <input type="text" class="text_field" id="contact" name="contact" placeholder="Contact No"
                    style="margin-bottom: 3px; width: 50%;" maxlength="15" />
            </div>
            <textarea id="feedback" name="feedback" placeholder="feedback" style="min-height: 41px;
                width: 48%;" maxlength="100" rows="" cols=""></textarea>
        </div>
        <input type="submit" value="Send" class="sendfeedback" />
    </div>
    </form>
</div>

我正在将这四个值保存到 sql server 数据库中。

点击提交按钮后，表单进入另一个asp.net c#项目(代码如下)进行数据保存。这里通过函数 SaveFeedback，它以整数值的形式返回结果，1 表示成功，0 表示失败。

我的代码是

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using CorporateOnlineTest.BAL;
using System.Text;

namespace CorporateOnlineTest.Web.WebsiteForm {
  public partial class WebSiteFeedbackProcessing: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
      string fname = "";
      string contact = "";
      string email = "";
      string feedback = "";

      for (int i = 0; i < Request.Form.AllKeys.Length; i++) {
        string key = Request.Form.AllKeys[i] + "";
        string value = Request.Form[i];

        if (key + "" == "fname") {
          fname = value;
        } else if (key + "" == "contact") {
          contact = value;
        } else if (key + "" == "email") {
          email = value;
        } else if (key + "" == "feedback") {
          feedback = value;
        }
      }

      //Insert in database and send mail.
      if (Request.Form.AllKeys.Length > 0) {
        int Submit;

        SubAdminBAL objSubadmin = new SubAdminBAL();
        Submit = SaveFeedback(fname, contact, email, feedback);

        if (Submit == 1) {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Your Feedback Has Been Sent Successfully!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        } else {
          ScriptManager.RegisterStartupScript(this, this.GetType(),
            "alert",
            "alert('Please Try Again!');window.location ='http://localhost:2421/Psychometricachat_ByKaustubh/p/online-managerial-skill-test.html';",
            true);
        }
      }
    }

    [WebMethod]
    public int SaveFeedback(string fname, string contact, string email, string feedback) {
      int Result = 0;
      SubAdminBAL bl = new SubAdminBAL();

      Result = Convert.ToInt32(bl.SaveWebsiteFeedbackBAL(fname, contact, email, feedback));

      return Result;

    }
  }
}

我想在我的 html 页面上显示这些消息而不重新加载该页面。

我尝试了很多选项，但每次我的页面都会在消息显示之前或之后重新加载。

有没有人有解决办法。请尽快恢复。

提前致谢

Answer 1

您可以使用 jQuery .ajax 保存反馈，类似于以下代码:

jQuery.ajax() Perform an asynchronous HTTP (Ajax) request. More

$('.btnSaveFeedback').on('click', function () {
    var fname = $('#fname').val();
    var contact = $('#contact').val();
    var email = $('#email').val();
    var feedback = $('#feedback').val();

    $.ajax({
        url: "/WebSiteFeedbackProcessing.aspx/SaveFeedback", // your Page, WenMethod, Handler,...
        type: 'post',
        data: {
            fname: fname,
            contact: contact,
            email: email,
            feedback: feedback
        },
        success: function (result) {
            alert('Successfully!!');
        },
        error: function (result) {
            alert('Failed!!');
        }
    });
});