title: How to use javascript to append the header of request before loading that page
body: <p>I have 2 html files belong to two different controllers</p>
  
  <p>This is belong to Index action of SignupController</p>
  
  <p>Index.html</p>
  
  <pre><code>&lt;div class="signup-small-font pull-right"&gt;&lt;a href="/Account/ResetPassword"&gt;Forgot password?&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When click at this link , it will go to that url and make a request to get the view of the ResetPassword Action of AccountController and get the resetPAssword.html</p>
  
  <p>Now what i want is before making that request , i need to append a custom header in the request for the server side .
  I was using ajax javascript :</p>
  
  <pre><code>function appendHeader(urlCulture){
  
  $.ajax({
      type: 'GET',
      url: urlCulture,
      headers: {
          "Culture": 'zh'
      },
  
  })
  }
  </code></pre>
  
  <p>What should i do in the index.html anchor link to call this function before requesting for the resetPassword.html</p>
  
  <p>Like what I want is when I click at it , it will navigate to Account/Resetpassword and use the response getting from javascript file to render instead of a normal response </p>